【CSS3】CSSだけで画像をゆっくりズームイン・ズームアウトさせる方法
以前、ホバー時に背景画像をズームイン(拡大)させる方法を紹介しました。
今回はホバーアクションではなく、
ヒーローエリアや要所要所でキービジュアルとして使われている画像をズームインする方法の紹介です。
CSSの設定で、ズームインのみや、ズームイン・アウトの繰り返し等の設定も出来ます。
CODE PEN
DEMOをCODE PENに用意したので下記をご覧ください。
動いていない場合は、右下の「Rerun」をクリックしてみてください。
HTML
HTML部分を抜き出すと下記のようになります。
画像をクラス設定するためのdivで囲うだけです。
<div class="zoom zoom-1">
<img src="****.jpg" alt="">
</div>
<div class="zoom zoom-2">
<img src="****.jpg" alt="">
</div>
CSS
共通部分
4行目のoverflow: hidden
で、拡大した画像がdivからはみ出た部分を隠します。
.zoom {
width: 300px;
height: 200px;
overflow: hidden
}
1度だけズームイン(拡大)
ズームインして、拡大した状態のままにしておくパターンは以下の通りです。
animationZoom1という名前のキーフレーム名を5秒かけて拡大し、
forwardsで、アニメーション終了時にキーフレームで設定された値のままにしておきます。
.zoom-1 img {
width: 100%;
height: auto;
animation: animationZoom1 5s ease-in-out forwards;
}
@keyframes animationZoom1 {
100% { transform: scale(1.1)}
}
ズームイン・アウトを繰り返す
animationZoom2というキーフレームを10秒かけてズームイン・アウトさせます。
キーフレームの50%の位置(5秒)で1.1倍に拡大し、100%(10秒)で等倍に戻ります。
infiniteはアニメーションを連続で再生します。
.zoom-2 img {
width: 100%;
height: auto;
animation: animationZoom2 10s ease-in-out infinite;
}
@keyframes animationZoom2 {
50% { transform: scale(1.1)}
}
参考にさせていただいたサイトはこちらです。
画像のゆっくりズームイン/ズームアウトはJavaScriptじゃなくてCSS3のアニメーション
こちらのサイトではbxsliderを使用して数枚の画像を切り替えながらズームさせていますが、
僕はカスタムして画像一枚だけで再現しています。