CSSだけで画像をバウンドアニメーションさせる方法

記事下とか注目させたいリンク画像があるとき、
"ぼよよん" とバウンドするアニメ効果を付けると効果的です。

自分が記事を読んでる側になると分かりますが、
ポツン... と画像があるより、躍動感のある方が注目されやすいに決まってます。

そこで CSS だけで画像をバウンドアニメーションさせる方法 を紹介

面倒な jQuery とかのスクリプトもありません。
本当に CSSだけ でできるので超簡単です。コピペＯＫなので初心者にも安心

ぼよよんバウンド させる基本的なCSS例

バウンドには次のCSSプロパティと@規則を使えばできます。

• transform プロパティ
  このプロパティに scale 関数を渡すと、要素を相対的に大きくしたり、小さくできる。たとえば scale(1.5) とすると、元要素に対して1.5倍の大きさ
• @keyframes
  要素に対して適用するアニメーションを作成するための＠規則。これがあるから面倒なスクリプトとか書かずにアニメーション可能
• animationプロパティ
  要素に @keyframes で作成するアニメーションを適用するためのもの。ここでアニメ時間とか方向とか実行回数とかを細かく指定できる

実際にどういう風に実装するのか、その手順は次の通り

１．バウンドアニメさせたい画像要素を作成する

まずは・・・バウンドさせたい画像要素作成します。

↓ たとえばこういう画像要素を作成

<div class="bound-img-wrap">
  <img src="dance.png" />
</div>

画像を bound-img-wrap という要素で囲んでるのがポイント。

このクラス名はなんでもいいんですが、ここでは仮でこういう名前にしておきます。

２．バウンドさせたい要素にこういうCSSを適用

そしたらこの画像に対して、次のCSSを適用

/** デフォルトの大きさは1.0倍 */
.bound-img-wrap img{
  transform: scale(1);
}
/** 画像ホバー時のアニメを設定 */
.bound-img-wrap img:hover{
  -webkit-animation: bound 1s ease-in; 
  -moz-animation:    bound 1s ease-in; 
  animation: bound 1s ease-in;
}

/** アニメーションの定義 */
@keyframes bound {
  /** 開始時は１倍の大きさ */
  from { transform: scale(1); }
  /** 0%～25%にかけて1.15倍する */
  25% { transform: scale(1.15); }
  /** 25%～50%にかけて0.95倍する */
  50% { transform: scale(0.95); }
  /** 50%～75%にかけて1.05倍する */
  75% { transform: scale(1.05); }
  /** 終了時は元の大きさに戻す */
  to { transform: scale(1); }
}

大まかに何をしてるかはコメント参照

この例では１秒かけて、要素を 1倍　⇒　1.15倍　⇒　0.95倍　⇒　1.05倍　⇒　1倍　と時間変化させることでバウンドして見えるように調整してます。

このタイミングとか倍率については、各自で調整してみてください。

実際に適用されるアニメは次のGif動画みたいな感じです。

自分で言うのもアレだけど "ぼよよん感" が出てる気がする

こういう面白いアニメ効果がついてると、画像がもっと目立ちやすくなりますね。

バウンドアニメをリピートさせ続けるには

ちなみに今紹介したCSSの場合、
ホバーしてアニメが終わると止まってしまいます。（一度限り）

もしホバー中にアニメをし続けたいなら、少し工夫が必要です。

そのやり方は animation プロパティに infinite を追加するだけ

例えば先ほどのCSSだったら、こういう風に書き変えます。

.bound-img-wrap img:hover{
  -webkit-animation: bound 1s ease-in infinite;
  -moz-animation:    bound 1s ease-in infinite;
  animation: bound 1s ease-in infinite;
}

@keyframes のところは一切書き変えなくてＯＫ

こうすると、ホバー時に永遠とバウンドアニメーションする画像になります。

↓ こういう風に延々とバウンドし続ける

画像要素をもっと強調したいときは、
ループさせると目立ちやすくなるかもしれません。

一度限りにするか、ループさせるかは個人の好み次第

まとめ - バウンドさせると目立ちやすい

こういうアニメ効果がついてると、
何か面白くて気になるし クリックもしたくなります。

テキストには使えないけど、画像リンクなら汎用性高そうです。

以上、CSSだけでバウンドアニメ効果を付ける方法でした。