swiperのフェード切り替えでゆっくり拡大していくアニメーション

手作りでやると地味に面倒だよなぁという意識持ってましたが、簡単にできる方法があったので紹介。

html

<div class="kv">
	<ul class="kv_list swiper-wrapper">
		<li class="kv_list_item_1 swiper-slide"><div class="slide_pic"></div></li>
		<li class="kv_list_item_2 swiper-slide"><div class="slide_pic"></div></li>
	</ul>
</div>

ちょっと都合があって背景化してるのでカラdivになってますがimgタグを置いてもok。
ポイントは、swiper-slideの中にdivをいれてそのdivにscaleのアニメーションをさせること。

css

.kv_list_item_1 .slide_pic{
	background: url('../img/index/kv_01.jpg') no-repeat center center;
	background-size: cover;
}

.kv_list_item_2 .slide_pic{
	background: url('../img/index/kv_02.jpg') no-repeat center center;
	background-size: cover;
}

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

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}

jsでのswiper設定

var kvSlider = new Swiper ('.kv', {
	loop: true,
	speed: 2000,
	effect: 'fade',
	autoplay: {
		delay: 7000,
		stopOnLast: false,
		disableOnInteraction: false
	}
});