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

CSSでバウンスアップ（跳ね返り）アニメーション効果を実装する方法

CSSでバウンスアップアニメーションを実装するには

CSSの@keyframesルールとanimationプロパティを組み合わせることで、要素が画面の下から跳ね上がって登場する「Bounce Up」アニメーション効果を簡単に実装できます。このエフェクトは、要素が一度大きく跳ね上がり、少し落下してから最終的な位置に自然に収まるという、弾力のある動きを表現します。

アニメーションの仕組み

このアニメーションは、進行度（パーセント）ごとに要素の状態を定義するキーフレームで構成されています。

  • 0%： 要素は完全に透明（opacity: 0）で、画面の far 下（translateY(2000px)）に配置されます。
  • 60%： 要素が不透明になり（opacity: 1）、目標位置より30px上まで跳ね上がります。
  • 80%： 重力で少し落下し、10px下に移動します。
  • 100%： 最終的な位置（translateY(0)）に滑らかに収まります。

コード例

以下のコードを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 bounceInUp {
            0% {
               opacity: 0;
               -webkit-transform: translateY(2000px);
            }
            60% {
               opacity: 1;
               -webkit-transform: translateY(-30px);
            }
            80% {
               -webkit-transform: translateY(10px);
            }
            100% {
               -webkit-transform: translateY(0);
            }
         }

         @keyframes bounceInUp {
            0% {
               opacity: 0;
               transform: translateY(2000px);
            }
            60% {
               opacity: 1;
               transform: translateY(-30px);
            }
            80% {
               transform: translateY(10px);
            }
            100% {
               transform: translateY(0);
            }
         }

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

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

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

実装のポイント

-webkit-から始まるプロパティは、SafariなどWebKit系ブラウザ向けのベンダープレフィックスです。近年のモダンブラウザでは標準の@keyframesやanimationプロパティがサポートされているため、必須ではありませんが、古いブラウザへの互換性を確保したい場合は併記しておくと安心です。

また、animation-duration: 10sでアニメーションの全体の長さを10秒に設定しており、animation-fill-mode: bothを指定することで、アニメーション開始前と終了後もキーフレームのスタイルが適用されたままになります。動きの速さや跳ねる高さ（translateYの値）を調整すれば、さまざまな演出にカスタマイズできます。

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

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

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

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