【初心者必見】CSSアニメーションを使って「ぽよん」と動かす！実装例を踏まえて解説

Webサイトに動きを加えたいけれど、CSSアニメーションの実装に自信がない…そんな悩みを持っていませんか？

今回は、初心者でも簡単に取り入れられる「ぽよん」としたCSSアニメーションの実装方法を実際のコード例を交えながら解説します。

ユーザー体験を向上させるインタラクティブなデザインに挑戦してみましょう！

CSSの「ぽよん」と弾むアニメーション実装方法

「ぽよん」と弾むアニメーションは、@keyframesルールとCSSプロパティを組み合わせて使用します。この@keyframesを使うことで、アニメーションのステップや変化を定義し、特定のタイミングで要素に対してどのような変化が起こるかを指示します。

/* ぽよんと弾むアニメーションの設定 */
@keyframes bounce { 
  0% {
    transform: translateY(0) scale(1); /* 通常の位置とサイズ */
  }
  30% {
    transform: translateY(-50px) scale(1.2); /* 少し上にジャンプして大きくなる */
  }
  50% {
    transform: translateY(0) scale(0.8); /* 元の位置に戻りつつ縮む */
  }
  70% {
    transform: translateY(-25px) scale(1.1); /* 小さくジャンプして大きくなる */
  }
  100% {
    transform: translateY(0) scale(1); /* 元のサイズと位置に戻る */
  }
}

実装例

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

HTMLでは、divタグにクラスbounce-circleを付けて、アニメーションの対象となる円を作成しています。

CSSでは、@keyframes bounceを使って、要素が上下に動き（translateY）、さらにサイズが大きくなったり小さくなったり（scale）する「ぽよん」と弾む設定です。

translateY() で要素のY軸方向（上下）に移動し、scale()で要素の大きさを変更しています。

bounce-circleクラスには、円形のスタイルと、弾むアニメーションが適用され、animation: bounce 1s ease infinite;で1秒ごとに「ぽよん」と弾む動きが無限に繰り返される仕組みです。

このコードをブラウザで実行すると、画面中央に表示された円が「ぽよん」と上下に弾みます。

ぽよんアニメーションの応用方法

ホバー時に「ぽよん」と動くボタン

ユーザーがボタンにマウスを乗せたときに「ぽよん」と弾むようなアニメーションを作成できます。この動きをつけることによって印象に残りやすくなります。

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

ボタンにhover状態でのみアニメーションを適用し、ユーザーがボタンにマウスを置いたときだけ「ぽよん」と弾むようなアニメーションが発生します。

クリック時に「ぽよん」とする要素

クリックした際に要素が一瞬「ぽよん」と弾むアニメーションを適用することも可能です。

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

この例では、要素がクリックされたときに「ぽよん」と弾む動きを追加しています。:active擬似クラスを使ってクリックした瞬間にアニメーションを発生させています。

複数の要素に異なるタイミングで「ぽよん」させる

複数の要素にそれぞれ異なるタイミングで「ぽよん」アニメーションを適用することで、リズミカルな動きを作り出せます。

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

animation-delayプロパティを使って、異なるタイミングでアニメーションを開始します。これにより、要素が少しずつずれて弾むように見せられるのでぜひ参考にしてみてください。

まとめ

本記事では、CSSの「ぽよん」アニメーションを実装する方法を紹介しました。

「ぽよん」としたアニメーションは、ユーザーに大きく印象を与えることができます。特にお子様のユーザーには親しみを持ってもらいやすいです。

今回紹介した方法を活用して、実装できるアニメーションの幅を広げていきましょう。

WithCodeを体験できる初級コース公開中！

初級コース(¥49,800)が完全無料に！

• 期間：1週間
• 学習内容：
  ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
  → 正しい学習方法で「確かな成長」を実感できるカリキュラム。

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？

未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！

↓