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

CSSで「fadeOutRightBig」アニメーション効果を実装する方法

CSSを使って画像や要素に「右へ大きくフェードアウト（fadeOutRightBig）」のアニメーション効果を付ける方法を解説します。このエフェクトは、要素が徐々に透明になりながら、画面の右側へ大きく移動して消えていくダイナミックな動きを作り出します。

fadeOutRightBigアニメーションの仕組み

このアニメーションは、CSSの@keyframesルールとtransformプロパティを組み合わせて実現します。開始時点（0%）では要素は不透明（opacity: 1）で元の位置にありますが、終了時点（100%）では完全に透明（opacity: 0）になりながら、X方向に2000px移動します。

実装のポイント

  • opacity： 要素の透明度を1から0へ変化させることで、滑らかなフェードアウトを表現します。
  • translateX(2000px)： 要素をX軸方向（右側）に大きく移動させます。移動距離は用途に応じて調整可能です。
  • animation-fill-mode: both： アニメーション開始前と終了後のスタイル状態を保持し、意図しない表示崩れを防ぎます。
  • -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 fadeOutRightBig {
          0% {
             opacity: 1;
             -webkit-transform: translateX(0);
          }
          100% {
             opacity: 0;
             -webkit-transform: translateX(2000px);
          }
        }
        @keyframes fadeOutRightBig {
          0% {
             opacity: 1;
             transform: translateX(0);
          }
          100% {
             opacity: 0;
             transform: translateX(2000px);
          }
        }

        .fadeOutRightBig {
          -webkit-animation-name: fadeOutRightBig;
          animation-name: fadeOutRightBig;
        }

      </style>
   </head>
   <body>

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

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

   </body>
</html>

まとめ

fadeOutRightBigは、モーダルを閉じる際の演出や、画面遷移時の要素退場アニメーションなど、さまざまなシーンで活用できる定番のCSSエフェクトです。@keyframesで透明度と移動距離を定義し、クラスとして適用するだけで手軽に導入できるため、ぜひ実際のWebサイト制作に取り入れてみてください。

  1. CSSでrotateOutUpRight（右上へ回転して退場）アニメーションを実装する方法

    CSSを使えば、要素が右下を軸として時計回りに90度回転しながら画面から消えていく「rotateOutUpRight（右上へ回転して退場）」アニメーションを簡単に実装できます。この記事では、@keyframesルールとtransform-originプロパティを組み合わせた具体的な実装例を紹介します。 rotateOutUpRightアニメーションの仕組み このアニメーションは、以下のCSSプロパティを組み合わせて実現します。 transform-origin：回転の軸となる基準点を指定します。ここでは「right bottom（右下）」を指定しています。 transform: rotate

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

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