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

CSSだけで実現するバウンスイン（Bounce In）アニメーションの作り方

CSSの@keyframesとanimationプロパティを組み合わせることで、JavaScriptに頼らずに「バウンスイン（Bounce In）」と呼ばれる弾むような登場アニメーションを簡単に実装できます。要素が小さく縮んだ状態から現れ、一度大きく膨らんでから収束する動きは、ロゴや画像、カード型コンテンツの表示演出として人気があります。

バウンスインアニメーションの仕組み

このアニメーションでは、transform: scale()を使って要素のサイズを段階的に変化させています。具体的には以下のような流れです。

  • 0%： 不透明度0・スケール0.3の状態からスタート（ほぼ見えない小さな状態）
  • 50%： 不透明度1・スケール1.05まで拡大し、元のサイズより少し大きく弾む
  • 70%： スケール0.9まで少し縮んで反動をつくる
  • 100%： スケール1（本来のサイズ）に落ち着いて完了

この「行き過ぎて戻る」という挙動が、自然なバウンド感を生み出します。

実装コード例

以下のコードをそのままHTMLファイルに保存してブラウザで開くと、画像がバウンスしながら表示されます。「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: 10s;
            animation-duration: 10s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
         }

         @-webkit-keyframes bounceIn {
            0% {
               opacity: 0;
               -webkit-transform: scale(.3);
            }
            50% {
               opacity: 1;
               -webkit-transform: scale(1.05);
            }
            70% {
               -webkit-transform: scale(.9);
            }
            100% {
               -webkit-transform: scale(1);
            }
         }

         @keyframes bounceIn {
            0% {
               opacity: 0;
               transform: scale(.3);
            }
            50% {
               opacity: 1;
               transform: scale(1.05);
            }
            70% {
               transform: scale(.9);
            }
            100% {
               transform: scale(1);
            }
         }

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

   </head>
   <body>

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

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

コードのポイント解説

1. ベンダープレフィックスへの対応

-webkit-付きの記述は、古いSafariやAndroidブラウザなどWebKit系エンジニア向けの互換性対応です。現在の主要ブラウザでは標準の@keyframesのみで動作しますが、古い環境もサポートしたい場合は両方を併記しておくと安心です。

2. animation-fill-mode: both の役割

animation-fill-mode: bothを指定することで、アニメーション開始前は最初のキーフレーム（不透明度0）の状態が適用され、終了後も最後のキーフレームの状態が維持されます。これにより、アニメーション前後に要素がちらつくのを防げます。

3. アニメーション速度の調整

サンプルではanimation-duration: 10sと10秒と非常に長めに設定しています。実際のサイトで使う場合は、0.5秒〜1秒程度に短縮すると自然な印象になります。

animation-duration: 0.8s;

応用：イージングを変えてみよう

animation-timing-functionを追加すれば、バウンスの質感をさらに調整できます。例えば以下のように指定すると、より軽快な動きになります。

.bounceIn {
   animation-name: bounceIn;
   animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

CSSアニメーションはGPUアクセラレーションが効くtransformやopacityを使うため、パフォーマンス面でも優れています。ぜひ自分のサイトのロゴ表示やモーダルウィンドウの登場演出などに活用してみてください。

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

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

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

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