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

CSSで実装するフェードアウトダウン（fadeOutDown）アニメーション効果

CSSで画像にフェードアウトダウン（fadeOutDown）アニメーションを実装する方法

要素が徐々に透明になりながら下方向へ移動する「フェードアウトダウン（fadeOutDown）」アニメーションは、CSSの@keyframesルールとanimationプロパティを組み合わせるだけで簡単に実装できます。

以下のサンプルコードでは、背景画像として設定したロゴに対して、10秒かけて不透明度（opacity）を1から0へ変化させながら、20px下方向へ移動させるアニメーションを適用しています。

コード例

<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 fadeOutDown {
            0% {
               opacity: 1;
               -webkit-transform: translateY(0);
            }
            100% {
               opacity: 0;
               -webkit-transform: translateY(20px);
            }
         }

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

         .fadeOutDown {
            -webkit-animation-name: fadeOutDown;
            animation-name: fadeOutDown;
         }
      </style>
   </head>
   <body>

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

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

コードのポイント解説

  • @keyframes fadeOutDown： アニメーションの開始時点（0%）ではopacity: 1で完全に表示され、終了時点（100%）でopacity: 0となり、同時にtranslateY(20px)によって20px下へ移動します。
  • -webkit-接頭辞： 旧バージョンのSafariやChromeなどWebKit系ブラウザとの互換性を保つために記述しています。
  • animation-fill-mode: both： アニメーションの開始前・終了後も最終的なスタイル状態を維持し、要素が消えたままになります。
  • animation-duration: 10s： アニメーション1回分の所要時間を10秒に設定しています。より短い時間で演出したい場合は、この値を調整してください。

ページ下部の「Reload page」ボタンをクリックするとページが再読み込みされ、フェードアウトダウンアニメーションを何度でも確認できます。

  1. CSSでrotateOutDownLeft（左下回転退場）アニメーション効果を作成する方法

    CSSの rotateOutDownLeft（左下回転退場）アニメーションは、要素が左下を基準点として回転しながら画面から消えていくエフェクトです。transform-origin で回転の軸を要素の左下隅に設定し、90度の回転と同時に opacity を0へ変化させることで、滑らかにフェードアウトする動きを実現できます。 実装のポイント transform-origin: left bottom — 回転の基準点を要素の左下に指定します。 @keyframes — アニメーションの開始時（0%）と終了時（100%）の状態を定義します。 animation-fill-mode: both —

  2. CSSで実現する「右下を支点に回転しながら消える」アニメーション効果の作り方

    CSSのアニメーションを使えば、要素を右下（right bottom）を支点として回転させながらフェードアウトさせる演出が簡単に実装できます。この効果は一般的に rotateOutDownRight と呼ばれ、要素が画面から消える際の退場アニメーションとしてよく活用されます。rotateOutDownRightアニメーションの仕組みこのアニメーションでは、以下のCSSプロパティが重要な役割を果たします。transform-origin: right bottom; … 回転の基準点を要素の右下に設定します。transform: rotate(-90deg); … 要素を反時計回りに90度回転さ