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

2025年7月24日2024年10月8日

生徒

ペン博士！Webサイトで、ボタンとかが「ぽよんっ」って弾むように動くのをよく見かけるんですけど…あれってどうやって作るんですか？

ペン博士

おお、それはCSSアニメーションを使った演出じゃな！特に「ぽよん」とした動きは、transform（変形）と @keyframes（キーフレーム）を組み合わせると簡単に再現できるぞ。今から詳しく解説するからよく聞くのじゃ！

生徒

ありがとうございます！お願いします！

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

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

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

「学習→収入」につなげた受講生のリアルな体験談も公開中！
働き方を変えたい方にも響くストーリーです。

渡邊さん
薬局薬剤師として働く中で「今後需要のあるスキルを身に付けたい」「副業で稼げるレベルになりたい」と考えプログラミングの学習を独学で始めるも、学習内容が案件獲得に結びつくビジョンが見えず、スクールやメンターを検討していたところWithCodeに出会って受講されました。入学から2カ月間の学習に取り組んだ後、無事に卒業テストを合格した。現在は、本業を薬剤師として働きながら、副業として案件を担当をされています。

詳しくはこちらの記事をご覧ください。

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); /* 元のサイズと位置に戻る */
  }
}