CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでバウンス（Bounce）アニメーション効果を実装する方法

バウンス（Bounce）アニメーション効果とは、要素が表面に当たった後に、素早く上へ跳ね返ったり、元の位置に戻ったり、離れたりする動きを表現するためのアニメーションです。ボタンやロゴなどに適用することで、ページに動きとリズム感を与えることができます。

実装のポイント

CSSの@keyframesを使ってバウンスの動きを定義し、animation-nameプロパティで要素に適用します。跳ね返りのタイミングはキーフレームのパーセンテージ（0%、20%、40%など）で細かく制御でき、translateY()で上下方向の移動量を指定します。

サンプルコード

以下のコードを実行すると、バウンスアニメーション効果を確認できます。「Reload page」ボタンをクリックすると、ページが再読み込みされてアニメーションが再生されます。

<html>
   <head>
      <style>

         .animated {
            background-image: url(/css/images/logo.png);
            background-repeat: no-repeat;
            background-position: left top;
            padding-top:95px;
            margin-bottom:60px;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
         }

         @-webkit-keyframes bounce {
            0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
            40% {-webkit-transform: translateY(-30px);}
            60% {-webkit-transform: translateY(-15px);}
         }

         @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
            40% {transform: translateY(-30px);}
            60% {transform: translateY(-15px);}
         }

         .bounce {
            -webkit-animation-name: bounce;
            animation-name: bounce;
         }
      </style>

   </head>
   <body>

      <div id="animated-example" class="animated bounce"></div>
      <button onclick="myFunction()">Reload page</button>

      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>
</html>

コードの解説

  • animation-duration: 1s; — アニメーション1回分の長さを1秒に設定しています。
  • animation-fill-mode: both; — アニメーションの開始前後もスタイルを保持するように指定しています。
  • @keyframes bounce — 0%〜100%の間で要素の垂直位置（translateY）を変化させ、跳ね返りのような動きを作り出しています。
  • -webkit-接頭辞 — 古いSafariやChromeなどのWebKit系ブラウザ向けの互換性対応です。

移動量（-30px、-15px）やパーセンテージの間隔を調整することで、跳ね返りの高さやテンポを自由にカスタマイズできます。

  1. CSSで実装するウォブル（揺れ）アニメーション効果の作り方

    CSSの@keyframesとtransformプロパティを組み合わせることで、要素を左右に揺らす「ウォブル（wobble）アニメーション」を簡単に実装できます。移動と回転を段階的に変化させることで、まるで物体がぐらついているような自然な動きを表現できるのが特徴です。 以下のサンプルコードを実行して、実際のアニメーション効果を確認してみましょう。 サンプルコード <html>    <head>       <style>          .animate

  2. CSSで実現するTada（タダ）アニメーション効果の作り方

    CSSを使えば、要素に「Tada」と呼ばれる揺れるようなアニメーション効果を簡単に追加できます。Tadaアニメーションは、要素が左右に傾きながら拡大・縮小を繰り返すことで、ユーザーの注意を引きつける演出としてよく使われます。ロゴやボタンを目立たせたい場面などに効果的です。以下のコードを実行すると、実際にTadaアニメーションの動作を確認できます。サンプルコード<html>    <head>       <style>          .animated {