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

CSSで作るフェードインライト（右からフェードイン）アニメーションの実装方法

CSSを使えば、画像や要素を右側からふわりと表示させる「フェードインライト（Fade In Right）」アニメーションを簡単に実装できます。このエフェクトは、要素が透明な状態から徐々に表示されながら、右側から本来の位置へスライドして現れる演出です。Webサイトのロゴやバナー、コンテンツの登場シーンなどに取り入れると、ページに動きがあり洗練された印象を与えられます。

実装例

以下のコードを実行すると、画像が右からフェードインするアニメーションを確認できます。ページ内の「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 fadeInRight {
            0% {
               opacity: 0;
               -webkit-transform: translateX(20px);
            }
            100% {
               opacity: 1;
               -webkit-transform: translateX(0);
            }
         }
         @keyframes fadeInRight {
            0% {
               opacity: 0;
               transform: translateX(20px);
            }
            100% {
               opacity: 1;
               transform: translateX(0);
            }
         }

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

   </head>
   <body>

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

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

   </body>
</html>

コードのポイント解説

@keyframesでアニメーションの流れを定義する

@keyframes fadeInRightでは、アニメーションの開始点（0%）と終了点（100%）の状態を指定しています。開始時はopacity: 0（完全に透明）かつtranslateX(20px)（右に20pxずれた位置）、終了時にはopacity: 1（完全不透明）かつtranslateX(0)（本来の位置）へと変化します。この組み合わせにより、「右から浮かび上がるように現れる」自然な動きが生まれます。

ベンダープレフィックス（-webkit-）について

サンプルでは-webkit-付きの記述が併用されています。これは古いSafariなどWebKit系ブラウザ向けの互換対応です。現在の主要ブラウザでは標準の@keyframesやanimationプロパティが広くサポートされているため、新規制作ではプレフィックスなしでも動作しますが、古い環境への対応が必要な場合は併記しておくと安心です。

animation-durationとanimation-fill-modeの役割

animation-duration: 10s;はアニメーションが完了するまでの時間を10秒に設定しています。実際のサイトでは動きが遅すぎて感じられることも多いため、0.5秒〜2秒程度に調整するのが一般的です。また、animation-fill-mode: both;を指定することで、アニメーション開始前・終了後もキーフレームの状態（透明度や位置）が保持され、表示のちらつきを防ぐことができます。

クラスを組み合わせてアニメーションを適用する

HTML側ではclass="animated fadeInRight"のように複数のクラスを組み合わせています。.animatedが共通のアニメーション設定を担い、.fadeInRightが具体的なアニメーション名を指定する構成です。このように役割を分けておくと、他のアニメーション効果との使い回しがしやすくなり、CSSの保守性も向上します。

  1. CSSでrotateInUpRight（右上へ回転しながら登場）アニメーションを実装する方法

    CSSの@keyframesとtransformプロパティを組み合わせることで、要素が右下を支点に回転しながらフェードインしてくる「rotateInUpRight」アニメーションを簡単に実装できます。rotateInUpRightアニメーションの仕組みこのアニメーションでは、以下のポイントを押さえています。transform-origin: right bottom … 要素の右下を回転の中心（支点）に設定します。transform: rotate(-90deg) … 開始時点では要素を-90度（左に倒れた状態）に傾けます。opacity … 開始時に0（透明）、終了時に1（不透明）へ変化させ

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

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