ぼよよんと弾むアニメーション

See the Pen ぼよよんと弾むアニメーション by チータツ (@cheese_fuji) on CodePen.

画像はいらすとやさんからお借りしています。

CSSの解説

<img class="boing" src="画像のURL">

/*** ぼよよんと弾むアニメーション ***/
img.boing {
	animation: .8s boing-anim linear infinite;
/* animation: 時間 アニメーション名 等速 繰り返す */
}

@keyframes boing-anim{
  10% { transform: scale(1.1, 0.9); } /*少し縮む*/
  40% { transform: scale(1.2, 0.80); } /*縮む*/
  50% { transform: scale(0.85, 1.15); } /*反動で縦長*/
  60%{ transform: scale(1.1, 0.9); } /*また反動で縮む*/
  70% { transform: scale(0.95, 1.08); } /*反動が小さく*/
  90%{ transform: scale(0.98, 1.02); } /*最後の震え*/
  100% { transform: scale(1,1); } /*元に戻る*/
}

• 動かしたい要素にanimationを当てる
  • animation: 時間 アニメーション名 速度変化 ループの有無 を指定
    ※animationプロパティの詳細
• @keyframesでアニメーションの動きを作る
  • transform: scale()を使って時間毎に幅と高さを変更する
  • 前半は幅大きめ・高さ小さめで "縮む" ような大きさに
  • 後半は反動で高さを大きくしたりしながら、徐々に幅と高さを1に近づけていく
  • 100%でscale(1,1)に戻す

「ぼよよん」という擬音の通り、感覚的なところが大きいので実装しながら調整しましょう。

また、%の間隔やscale()の値・アニメーションの時間を変えることで、ゆっくり伸び縮みしたり、ぶるぶる震えるようなアニメーションにもできます。色々と数値を変更してみて自分の好きな動きを探してみてください。

応用CSS

マウスホバーでぼよよん

マウスホバーの時だけ弾むアニメーション。おそらく「ぼよよん」の使い方としては、ホバーアニメーションが最も使い勝手がいいと思います。

大きな違いは、アニメーションさせる要素を:hoverで条件付けしていることぐらいです。あとは、ループすると鬱陶しいのでanimationプロパティからinifiniteを除外して、終了時の状態を維持するforwardsを指定しています。

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

反動でそのまま飛んでいく

translateY()による上下移動をアニメーションに加えると、反動による跳躍も表現することが可能です。飛んで行ったあとは邪魔にならないようvisibility: hiddenなどで消しておきましょう。

なお、このアニメーションの使いどころは分かりません。（ただの思いつき）

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

↑Rerunをクリックで再度アニメーション

おすすめの使い方

• 吹き出し
• マウスホバーの動き