以前の記事で、「SwiperとCSSを使用し、スライダーの背景画像をズームしながらふわっと切り替えする方法」を紹介しました。
今回は、画像をズームアップさせた際にスマホで確認すると、途中でズームアップされず、かくっとなる現象が起きたため、その解決方法を紹介します。
設定は簡単です。
アニメーションの動きを指定する際に、［-webkit-backface-visibility:hidden;］［backface-visibility:hidden;］を書くことでかくっとなる動きがなくなり、スムーズに動くようになります。
@keyframes zoomUp {
0% {
transform: scale(1);
}
100% {
transform: scale(1.15);
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}
}ぜひ、お試しください。
