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

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

CSSを使えば、JavaScriptなどのスクリプト言語に頼ることなく、画像や要素に滑らかなフェードアウト（徐々に消えていく）アニメーション効果を簡単に実装できます。フェードアウトは、要素の不透明度（opacity）を「1」から「0」へと時間をかけて変化させることで実現します。

フェードアウトアニメーションの基本

フェードアウトを実現するために使用する主なCSSプロパティは以下のとおりです。

  • @keyframes：アニメーションの開始（0%）から終了（100%）までの各段階におけるスタイルを定義します。
  • animation-name：適用する@keyframesの名前を指定します。
  • animation-duration：アニメーションが完了するまでの所要時間を指定します。
  • animation-fill-mode: both：アニメーションの開始前・終了後にもキーフレームで指定したスタイルを維持します。

サンプルコード

以下のコードは、画像に10秒かけてフェードアウト効果を適用する例です。「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 fadeOut {
            0% {opacity: 1;}
            100% {opacity: 0;}
         }
         @keyframes fadeOut {
            0% {opacity: 1;}
            100% {opacity: 0;}
         }
         .fadeOut {
            -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
         }
      </style>
   </head>
   <body>
      <div id="animated-example" class="animated fadeOut"></div>
      <button onclick="myFunction()">Reload page</button>
      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>
</html>

コードの解説

@keyframes fadeOutでは、アニメーションの開始時点（0%）でopacityを「1」（完全に表示）、終了時点（100%）で「0」（完全に非表示）に設定しています。これにより、要素が徐々に透明になっていくフェードアウト効果が生まれます。

また、-webkit-というプレフィックスが付いたプロパティは、旧バージョンのSafariなどWebKit系ブラウザ向けの互換性対応です。近年のモダンブラウザでは標準プロパティだけで動作しますが、より多くの環境で確実に表示させたい場合は併記しておくと安心です。

アニメーションの速度を変えたい場合は、animation-durationの値（例：10s）を変更するだけで調整できます。5sにすれば5秒、20sにすれば20秒かけてゆっくりとフェードアウトします。

  1. CSSでロールアウトアニメーション効果を作成する方法

    CSSのアニメーション（@keyframes）を活用すると、JavaScriptに頼らずに要素が回転しながら画面の外へ消えていく「ロールアウト」効果を簡単に実装できます。この記事では、実際に動作するサンプルコードを通じて、その実装方法をわかりやすく解説します。ロールアウトアニメーションの仕組みロールアウトアニメーションは、主に以下のCSSプロパティを組み合わせて実現します。transform：translateX()で横方向に移動させ、rotate()で要素を回転させます。opacity：要素を徐々に透明にすることで、滑らかに消える演出を作れます。@keyframes：アニメーションの開始（0

  2. CSSで回転しながら消えるアニメーション（rotateOut）を作る方法

    CSSを使えば、要素が回転しながら画面から消えていく「rotateOut（回転退場）」アニメーションを簡単に実装できます。ここでは、@keyframesとanimationプロパティを組み合わせた基本的な実装例を紹介します。 実装例 以下のコードでは、画像を含む要素が10秒かけて200度回転しながらフェードアウトします。「Reload page」ボタンでページを再読み込みすると、アニメーションを何度でも確認できます。 <html>    <head>       <style>     &