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

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

CSSで画像を上方向へフェードアウトさせる方法

CSSを使って画像に「Fade Out Up（フェードアウト・アップ）」アニメーション効果を実装するには、@keyframesルールでopacity（不透明度）とtransform（移動）を組み合わせて定義します。要素が徐々に透明になりながら、Y軸方向へ上に移動していくエフェクトです。以下のコードを実行して、実際の動きを確認してみてください。

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

このアニメーションでは、初期状態（opacity: 1）から最終状態（opacity: 0）にかけて要素が徐々に透明になり、同時にtranslateY(-20px)によって20px上方向へ移動します。animation-durationでアニメーションの長さを10秒に設定し、animation-fill-mode: bothを指定することで、アニメーション開始前後もスタイルが維持されます。また、Safariなど古いWebKit系ブラウザ向けに-webkit-プレフィックス付きの記述も併せて定義しておくと互換性が高まります。

コード例

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

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

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

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

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

ポイント解説

  • @keyframes fadeOutUp： アニメーションの開始（0%）から終了（100%）までの各段階のスタイルを定義します。
  • opacity: 1 → 0： 要素が完全な表示状態から徐々に透明へと変化していきます。
  • translateY(-20px)： フェードアウトしながら要素が上方向に20px移動します。
  • リロードボタン： サンプルではJavaScriptのlocation.reload()を使ってページを再読み込みすることで、アニメーションを何度でも確認できるようにしています。
  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>     &