アイコンをぴょんぴょん動かす方法【CSSアニメーション】

この記事の前提条件

対象: CSS(全モダンブラウザ対応)
難易度: ★☆☆
所要時間: 約5分

「下へスクロール」を促す矢印アイコンや、通知バッジがぴょんぴょん跳ねているアニメーション、見かけたことがあると思います。画像(GIF)を使わなくても、CSSの@keyframesだけでこの動きは再現できます。動画やGIFより軽量で、色の変更も一瞬です。

目次非表示

@keyframesでバウンドの動きを定義する
要素に animation プロパティを適用する
実務での注意点: 使いすぎに注意
まとめ

目次へ

@keyframesでバウンドの動きを定義する

まず、アニメーションの「途中経過」を@keyframesで定義します。上下に動くだけのシンプルなバウンドなら、開始・頂点・終了の3点を指定すればOKです。

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

0%(開始)と100%(終了)を同じ位置にしておくことで、動きがループしても不自然な瞬間移動が起きません。50%(中間地点)で-10px上に動かすことで、山なりのバウンドを表現しています。

要素に animation プロパティを適用する

定義した@keyframesを、実際に動かしたい要素にanimationプロパティで適用します。

.bounce-icon {
  animation: bounce 1s ease-in-out infinite;
}

それぞれの数値の意味は次の通りです。

bounce: 適用する@keyframesの名前
1s: 1往復にかける時間
ease-in-out: 動きの緩急(なめらかに加速・減速する)
infinite: 無限にループさせる

💡 translateYを使う理由

位置を動かすならtopやmargin-topでも一見同じように動かせますが、これらのプロパティはブラウザに周囲のレイアウト全体を再計算させるため、動きがカクついたり、他の要素の位置までズレて見えたりすることがあります。transform: translateY()は見た目の位置だけを動かす仕組みなので、周囲への影響がなく、動きも滑らかです。アニメーションで要素を動かす時はtransformを使うのが基本、と覚えておいてください。