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

CSSだけで実現できるフェードインアニメーションの作り方

CSSによるフェードインアニメーション効果とは

Webページに動きを加える演出のひとつとして人気が高いのが「フェードイン」です。画像や要素が徐々に表示されることで、ページ全体に洗練された印象を与えられます。CSSの@keyframesとanimationプロパティを使えば、JavaScriptに頼らず簡単にこの効果を実装できます。

以下は、CSSを使って画像にフェードインアニメーション効果を実装するサンプルコードです。実際にブラウザで確認するには、次のコードをお試しください。

サンプルコード

<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 fadeIn {
            0% {opacity: 0;}
            100% {opacity: 1;}
         }

         @keyframes fadeIn {
            0% {opacity: 0;}
            100% {opacity: 1;}
         }

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

      </style>

   </head>
   <body>

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

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

   </body>
</html>

コードの解説

1. アニメーションの基本設定（.animated）

.animatedクラスでは、背景画像の表示位置や余白といったレイアウト関連の指定に加えて、アニメーションに関する重要な2つのプロパティを設定しています。

  • animation-duration: 10s; … アニメーションが完了するまでの時間を10秒に設定します。数値を小さくすれば、より短い時間でフェードインが完了します。
  • animation-fill-mode: both; … アニメーションの開始前と終了後にも、キーフレームで指定したスタイル（透明度など）を適用し続けるための設定です。これにより、アニメーション開始前は要素が非表示の状態を保てます。

先頭に付いている-webkit-はベンダープレフィックスと呼ばれるもので、古いバージョンのSafariやChromeなどのWebKit系ブラウザでも動作させるために記述しています。

2. キーフレームの定義（@keyframes fadeIn）

@keyframesルールで「fadeIn」という名前のアニメーションの流れを定義しています。

・0%（開始時点）： opacity: 0; … 要素は完全に透明な状態
・100%（終了時点）： opacity: 1; … 要素は完全に不透明な状態

つまり、要素の透明度（opacity）を0から1へと徐々に変化させることで、「ゆっくりと浮かび上がってくる」ような視覚効果を実現しています。

3. アニメーションの適用（.fadeIn）

.fadeInクラスでは、animation-nameプロパティを使って、先ほど定義した「fadeIn」キーフレームを要素に割り当てています。HTML側でclass="animated fadeIn"のように複数のクラスを組み合わせることで、設定とアニメーションの定義を分離でき、コードの再利用性が高まります。

動作確認のポイント

サンプル内の「Reload page」ボタンをクリックするとlocation.reload()によってページが再読み込みされ、フェードインアニメーションを何度でも確認できます。アニメーションはページ読み込み時に自動的に開始されるため、リロードしないと最初の状態を見ることができません。

まとめ

CSSの@keyframesとanimationプロパティを組み合わせれば、追加ライブラリ不要でフェードインアニメーションを実装できます。durationの値を調整すれば表示速度も自由にコントロール可能です。まずはこのサンプルをベースに、さまざまな要素へ応用してみてください。

  1. CSSで実現するフラッシュ（点滅）アニメーション効果の作り方

    要素が突然、短い時間だけ明るく発光するように見える演出が「フラッシュ（Flash）」効果です。CSSのアニメーション機能を使えば、外部ライブラリや複雑なJavaScriptに頼ることなく、この点滅のような視覚効果を手軽に実装できます。フラッシュ効果の仕組みフラッシュ効果は、@keyframesルールで要素のopacity（不透明度）を一定のタイミングで切り替えることで実現します。以下の例では、0%・50%・100%の時点で不透明度を「1」（完全に表示）に、25%と75%の時点で「0」（完全に非表示）に設定しています。これにより、要素が素早く点滅し、フラッシュのような印象を与えます。コード例&l

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

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