배경 이미지에만 줌아웃 애니메이션을 적용하고 싶은데 잘 안되네요..

<style>
.swiper-slide.xet-bg-cover{
animation: zoomOut1;
animation-duration: 7s;
-webkit-animation: zoomOut1  7s; /* Safari and Chrome */
}


@keyframes zoomOut1 {
    /*
    0% {
       transform: scale(1.3, 1.3);
    }

    50% {
        transform: scale(1, 1);
    }

    to {
        transform: scale(1, 1);
    }
    */
    0% {
        background-size: 150% 150%;
    }
    100% {
        background-size: 100% 100%;
    }
}

.xet-bg-cover {
    width: 90%;
    height: 90%;
    background-image: url(/files/attach/images/145/8a39287959bc321c48b8a89629bcffdf.jpg);
    background-position: center;
    background-size: 100% 100%;
}
</style>


<div class="swiper-slide xet-bg-cover">
    123<br>
    123<br>
    123<br>
    123<br>
</div>