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

CSSで実現する「Fade In Up Big」アニメーション効果の実装方法

CSSを使えば、画像や要素に対して「Fade In Up Big（大きく下からフェードインしながら上昇する）」アニメーション効果を簡単に追加できます。このエフェクトは、要素を画面の下方から大きな距離を移動させながら徐々に表示させるもので、Webサイトに動きのある印象的な演出を加えたい場合に非常に便利です。

実装のポイント

このアニメーションを実装する際に押さえておきたい主なポイントは以下の通りです。

  • animation-duration：アニメーションの再生時間を指定します。サンプルでは10秒に設定しています。
  • animation-fill-mode: both：アニメーション開始前と終了後のスタイル状態を保持し、途中でちらつくのを防ぎます。
  • @keyframes：アニメーションの各段階のスタイルを定義します。0%の時点では不透明度0・Y方向に2000px移動した位置からスタートし、100%で不透明度1・元の位置へ到達します。
  • -webkit-プレフィックス：SafariなどWebKit系ブラウザ向けの互換性を確保するために併記します。

コード例

以下のコードを実行すると、画像が下から大きくフェードインしながら上昇するアニメーションを確認できます。「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 fadeInUpBig {
            0% {
            opacity: 0;
            -webkit-transform: translateY(2000px);
           }
         100% {
            opacity: 1;
            -webkit-transform: translateY(0);
           }
        }

      @keyframes fadeInUpBig {
         0% {
            opacity: 0;
            transform: translateY(2000px);
          }
         100% {
            opacity: 1;
            transform: translateY(0);
          }
      }

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

   </head>
   <body>

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

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

動作の解説

このコードでは、.animatedクラスで背景画像やアニメーションの基本設定を行い、.fadeInUpBigクラスでキーフレーム名を指定しています。@keyframes fadeInUpBig内では、開始時点（0%）で要素をopacity: 0（完全に透明）かつtranslateY(2000px)（2000px下方）の状態に置き、終了時点（100%）でopacity: 1（完全不透明）かつtranslateY(0)（元の位置）へ移動させています。

これにより、要素が画面の下の方からゆっくりと浮かび上がりながら徐々に表示される、滑らかなフェードインアップ効果が実現されます。再生時間（animation-duration）や移動距離（translateYの値）を変更すれば、演出のスピードやダイナミックさを自由に調整できます。

  1. CSSでFlipInXアニメーション効果を実装する方法

    CSSのFlipInXアニメーションは、要素がX軸を中心に回転しながら画面に登場する、立体感のある演出効果です。バナー画像やロゴなどを目立たせたい場面で活用できます。このアニメーションは、@keyframesルールとtransform: perspective()プロパティを組み合わせることで実現します。要素は最初90度傾いて見えない状態から始まり、途中でわずかにオーバーシュートしながら最終的に正面へと戻ることで、自然な「フリップ」感を生み出します。実装のポイントperspective(400px): 立体感（奥行き）を表現するために指定します。rotateX(): X軸を中心とした回転角度を

  2. CSSでfadeOutUpBig（大きなフェードアウト）アニメーション効果を実装する方法

    CSSを使えば、JavaScriptに頼らなくても要素を画面の上方向へ大きく移動させながらフェードアウトさせる「fadeOutUpBig」アニメーションを簡単に実装できます。この効果は、画像やロゴ、バナーなどをスムーズに退場させたい場合に便利です。fadeOutUpBigアニメーションの仕組みこのアニメーションは、@keyframesルールで定義します。開始時点（0%）では要素は不透明度1・元の位置にあり、終了時点（100%）では不透明度0になりながら2000px上方向へ移動します。これにより、要素が大きく浮き上がるように消えていく演出が生まれます。主なプロパティのポイントanimation-