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

CSSでアニメーションの塗りつぶしモード（animation-fill-mode）を設定する方法

CSSでアニメーションの塗りつぶしモードを設定する方法

CSSでアニメーションの塗りつぶしモードを設定するには、animation-fill-modeプロパティを使用します。このプロパティを使うと、アニメーションの実行時間外（開始前や終了後）に要素へどのスタイルを適用するかを細かく制御できます。

animation-fill-modeの主な値

  • none：アニメーションの実行時間外にはスタイルを適用しません（デフォルト値）。
  • forwards：アニメーション終了後も、最後のキーフレームのスタイルが保持されます。
  • backwards：アニメーション開始前（animation-delayによる遅延時間中など）に、最初のキーフレームのスタイルが適用されます。
  • both：forwardsとbackwardsの両方の動作が適用されます。

以下のコードを実行して、アニメーションの塗りつぶしモードの設定を試してみてください。この例では、div要素が2秒かけて右へ移動し、背景色が緑から青へ変化します。animation-fill-modeにforwardsを指定しているため、アニメーション終了後も最後の状態（left: 200px、青色の背景）がそのまま保持されます。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 150px;
            height: 200px;
            position: relative;
            background: red;
            animation-name: myanim;
            animation-duration: 2s;
            animation-fill-mode: forwards;
         }
         @keyframes myanim {
            from {left: 0px; background-color: green;}
            to {left: 200px; background-color: blue;}
         }
      </style>
   </head>
   <body>
      <div></div>
   </body>
</html>

forwardsの代わりにbackwardsやbothを指定して動作の違いを確認すると、塗りつぶしモードの挙動がより理解しやすくなります。

  1. CSSでページネーションをスタイリングする方法

    Webサイトで複数ページに分かれたコンテンツを扱う際、ページネーション(ページ送り)のデザインはユーザビリティに大きく影響します。CSSを使えば、単なるテキストリンクの並びを、見やすくクリックしやすいナビゲーションへと変えることができます。 基本的なページネーションの実装例 以下のコードは、CSSでページネーションをスタイリングする基本的な例です。そのままHTMLファイルとして保存し、ブラウザで開けばすぐに動作を確認できます。 <!DOCTYPE html> <html>    <head>      

  2. CSSだけで作るタイプライターアニメーションの実装方法を解説

    CSSアニメーションを活用すれば、テキストが一文字ずつ打ち込まれていくような「タイプライターアニメーション」を実現できます。JavaScriptに頼らなくても、CSSのsteps()関数と@keyframesを組み合わせるだけで、この演出効果を簡単に作ることが可能です。以下に、その具体的な実装例を紹介します。タイプライターアニメーションの仕組みこのアニメーションでは、主に次のCSSテクニックを組み合わせています。steps()関数：アニメーションをなめらかに変化させるのではなく、段階的に（カクカクと）進めることで、文字が一つずつ打ち込まれるような動きを表現します。overflow: hidde