swiperでズームキャッチ

<style type="text/css">
@keyframes zoomUp {
0% {
transform: scale(1.13);
}
100% {
transition-property: all;
transition-duration: 0.6s;
/* イージングを指定 */
transition-timing-function: ease-in-out;
}
}
.swiper-slide-active .swiper-img, .swiper-slide-duplicate-active .swiper-img, .swiper-slide-prev .swiper-img ,.swiper-slide-active p{
animation: zoomUp 5s ease-in-out 0s normal both;
}
.swiper-slide img {
height: auto;
width: 100%;
}


/* 表示されているスライドのテキスト */

.swiper p {
color: #fff;
font-size: 4vw;
font-weight: 700;
left: calc(50% - 180px);
position: absolute;
text-shadow: 1px 1px 2px #333;
top: 45%;
width: 360px;
z-index:2;
}


.swiper p img{
width:100%;
height:auto;
}


.swiper p {
animation-delay: 1.5s;
animation-duration: 4s;
animation-fill-mode: both;
animation-name: fadeIn;


}
/* アニメーション */
.fade{
animation: fadeIn 0.1s ease 0.1s 1 normal;
}
@keyframes fadeIn { /*animation-nameで設定した値を書く*/
0% {opacity: 0
} /*アニメーション開始時は不透明度0%*/
100% {
opacity: 1
} /*アニメーション終了時は不透明度100%*/

}
</style>

<script>
const swiper = new Swiper(".swiper", {
loop: true,
effect: "fade", // フェード切り替え
// 自動再生
autoplay: {
delay: 4600, // 4秒後に次のスライドへ
disableOnInteraction: false, // ユーザーが操作しても自動再生を継続
},
speed: 2000, // 2秒かけてフェード
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});

</script>

<div class="swiper">

<p class="fad"><img src="https://yis2.earthrise.tokyo/wp-content/uploads/2023/09/catch_logo-1.png" alt="" /></p>

<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-img">
<img src="https://yis2.earthrise.tokyo/wp-content/uploads/2023/09/catch_pc01.png" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="swiper-img">
<img src="https://yis2.earthrise.tokyo/wp-content/uploads/2023/09/catch_pc02.png" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="swiper-img">
<img src="https://yis2.earthrise.tokyo/wp-content/uploads/2023/09/catch_pc03.png" alt="" />
</div>
</div>
</div>
<!-- ページネーション -->
<div class="swiper-pagination"></div>
</div>