バウンドアニメーション

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

それぞれタイミング関数が異なり、左から順に linear(等速) , ease(中央で最速), ease-in(終盤で最速), ease-out(序盤が最速) となっています。

CSSの解説

<div class="animbox">
  <div>
    <img class="linear" src="URL">
  </div>
  <div>
    <img class="ease" src="URL">
  </div>
  <div>
    <img class="easein" src="URL">
  </div>
  <div>
    <img class="easeout" src="URL">
  </div>
</div>

/*** アニメーションの動き **/
@keyframes bound-anim{
  0%{transform:translateY(0px);}
  100%{transform: translateY(24px);}
}

/*** 等速のアニメーション ***/
img.linear{
  animation: .5s bound-anim linear infinite alternate;
}

/*** 前半は徐々に速く、後半は減速する ***/
img.ease{
  animation: .5s bound-anim ease infinite alternate;
}

/*** 徐々に速くなる ***/
img.easein{
  animation: .5s bound-anim ease-in infinite alternate;
}

/*** 最速で始まって減速していく ***/
img.easeout{
  animation: .5s bound-anim ease-out infinite alternate;
}

• 最初にアニメーションの動作を決める キーフレーム keyframes を設定
  • 任意の名前をつける（今回は bound-anim ）
  • transform を使って段階的に高さを変える
    • 0%で高さの変化なし translateY(0)
    • 100% 時点で ○○px 下の位置 translateY(○○px)
• アニメーションさせたい要素に animation プロパティでスタイルを一括指定する
  • animation: 時間　キーフレーム　タイミング　再生回数　向き;　の5つを指定
    • 時間：任意の時間（短めの方がバウンド感が出る）
    • キーフレーム：先ほど名前を付けたkeyframes
    • タイミング：任意の要素（ ease-in が一番バウンドっぽい）
    • 再生回数： infinite で永続ループさせる
    • 向き：alternate で100％まで行った時に反転させる
• アニメーションさせる要素に padding か margin で縦方向に十分な余白を取る

animationプロパティに関しての詳細はこちら。
animation - CSS

応用CSS

リンクをバウンドさせる

重要なリンクやボタンなどに動きを付けることで、ユーザーにクリックを催促します。（動きが激しすぎるとスパムチックになるので注意）

aタグにアニメーションを付ける場合は、デフォルト状態である inline ではアニメーションが適用されないため、dispaly: を block か inline-block に変更しましょう。

See the Pen バウンドするリンク by チータツ (@cheese_fuji) on CodePen.

上下の動き（translateYの変化量）は小さめに、アニメーションの時間は比較的長めに取るのがおすすめです。

おすすめの使い方

• サイトロゴ
• 円形の画像など
• トップページのヘッダー

また、 span タグを使って1文字ずつ動きを付けることで、様々なテキストアニメーションを実装することも可能です。

動きのあるテキスト