★★★ たった "1日" でできるWordPressブログの作り方講座 ★★★ はじめてみる

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.バウンドさせたい要素にこういう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 {
  /** 開始時は1倍の大きさ */
  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倍 ⇒ 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 のところは一切書き変えなくてOK

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

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

ホバーすると延々とバウンドアニメーションし続ける画像の例

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

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

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

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

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

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

The following two tabs change content below.

フク郎

昔はプログラミングに熱中していたが、ブログとWordPressに興味を持ち始め今はサイト・ブログ作りが生きがい。自分の「好き」をブログに変えたい、情報発信したい人に役立つWordPress術・サイト構築術を発信中。一日一歩楽しんでブログ構築できるように読みやすい&楽しい記事作りを心がけています。Twitterアカウントはこちら ⇒ フク郎@Fukuro-Press