【CSS3】CSSだけで画像をゆっくりズームイン・ズームアウトさせる方法

以前、ホバー時に背景画像をズームイン（拡大）させる方法を紹介しました。

【コピペOK】hover時に背景画像だけ拡大する方法【HTML/CSS】
【コピペOK】hover時に背景画像だけ拡大する方法【HTML/CSS】
バナー等で使える、ホバー時にテキストのサイズはそのままで、背景画像だけを拡大するCSSアニメーションの紹介です。

今回はホバーアクションではなく、
ヒーローエリアや要所要所でキービジュアルとして使われている画像をズームインする方法の紹介です。
CSSの設定で、ズームインのみや、ズームイン・アウトの繰り返し等の設定も出来ます。

この記事の目次

  1. CODE PEN
  2. HTML
  3. CSS

CODE PEN

DEMOをCODE PENに用意したので下記をご覧ください。
動いていない場合は、右下の「Rerun」をクリックしてみてください。

See the Pen
zoom in by Gokan Soichiro (@sow_g)
on CodePen.

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
}

１度だけズームイン（拡大）

ズームインして、拡大した状態のままにしておくパターンは以下の通りです。
animationZoom1という名前のキーフレーム名を５秒かけて拡大し、
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を使用して数枚の画像を切り替えながらズームさせていますが、
僕はカスタムして画像一枚だけで再現しています。

© GOKAN DESIGN STUDIO