画像のズームフェードができない

Question

実現したいこと

swiperを使用して画像をズームフェードで切り替えを行いたく、検索しながらコードを記述してフェード切り替えはできたのですがどうしてもアニメーションのズームが反映されません。
どこが違うのかわからずご教示いただきたいです。

発生している問題・分からないこと

アニメーションが反映されない

該当のソースコード

<div class ="main-slide">
                <div class="swiper mainview-slide">
                    <!-- Additional required wrapper -->
                    <div class="swiper-wrapper">
                        <!-- Slides -->
                        <div class="swiper-slide">
                            <div class ="slide-img">
                                <img src="img/jpg" alt="">
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class ="slide-img">
                                <img src="img.jpg" alt="">
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class ="slide-img">
                                <img src="img.jpg" alt="">
                            </div>
                        </div>
                    </div>

                </div>
            </div>

/*スライドアニメーション*/
@keyframes zoomUp {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(1.2);
    }
  }
  
.swiper-slide-active .swiper-img,
.swiper-slide-duplicate-activ .swiper-img,
.swiper-slide-prev .swiper-img{
    animation: zoomUp 7s linear 0s 1 normal both; 
}

.mainview-slide .slide-img img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

$(function(){

  const swiper = new Swiper(".mainview-slide", {
    loop: true,
    effect: "fade",
    autoplay: {
      delay: 4000,
      disableOnInteraction: false,
    },
    speed: 2000, 

  });
})

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

こちらのサイトを見ながら記述しましたが、違いがわかりませんでした。

補足

特になし

Comments

[kirin311]

まず.swiper-imgが、HTMLで指定されていないのが原因ですね。
slide-imgになっています。

[azejun0127]

ミスを見落としていたみたいで、こちら修正しましたところ無事動きました！
ありがとうございます！

Answer 1

CSSの書き換えを行ったところ無事動きました！

.swiper-slide-active .swiper-img,
.swiper-slide-duplicate-activ .swiper-img,
.swiper-slide-prev .swiper-img{
    animation: zoomUp 7s linear 0s 1 normal both; 
}

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-activ .slide-img,
.swiper-slide-prev .slide-img{
    animation: zoomUp 7s linear 0s 1 normal both; 
}