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

CSSのanimation-fill-modeプロパティとは？使い方と値の解説

CSSのanimation-fill-modeプロパティとは

animation-fill-modeプロパティは、アニメーションが再生されていない期間（再生前・再生後）に要素へ適用されるスタイルを指定するためのCSSプロパティです。通常、アニメーションが終了すると要素は元のスタイルに戻りますが、このプロパティを使うことで、アニメーション開始前や終了後の見た目を自由にコントロールできます。

animation-fill-modeで指定できる主な値

  • none：アニメーション適用範囲外のスタイルは変化しません（初期値）。
  • forwards：アニメーション終了後も、最後のキーフレームのスタイルが維持されます。
  • backwards：アニメーション開始前に、最初のキーフレームのスタイルが適用されます。animation-delayとの組み合わせで特に有効です。
  • both：forwardsとbackwardsの両方の挙動を持ちます。

サンプルコード

以下のコードでは、animation-fill-modeに「backwards」を設定しています。これにより、アニメーションが始まる前の待機時間中でも、最初のキーフレーム（緑色の背景）のスタイルが要素に適用されます。

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

まとめ

animation-fill-modeプロパティを活用すれば、アニメーションの前後における要素のスタイルを細かく制御できます。特にanimation-delayで遅延を設定した場合に、開始前の状態を自然に演出できるため、モダンなWebアニメーション制作において覚えておきたい重要なプロパティです。

  1. CSSのwriting-modeプロパティ徹底解説！テキストを縦書き・横書きにする方法

    writing-modeプロパティとは CSSのwriting-modeプロパティは、テキストの行を水平方向にレイアウトするか、垂直方向にレイアウトするかを指定するためのプロパティです。日本語の縦書きのように、上から下へ文字を読ませるレイアウトも簡単に実現できます。 基本構文 writing-mode: horizontal-tb | vertical-rl | vertical-lr; 指定できる主な値 horizontal-tb … 行が上から下へ流れる標準的な横書き表示（初期値） vertical-rl … 行が右から左へ流れる縦書き表示。日本語や中国語などの縦組みレイアウトに適し

  2. CSSのpointer-eventsプロパティとは？使い方をコード例で解説

    pointer-eventsプロパティとは CSSのpointer-eventsプロパティは、要素に対してポインターイベントが発生した際に、その要素がアクション（反応）を行うかどうかを指定するためのプロパティです。ポインターイベントは、マウスのクリック、タッチ操作、スタイラスペンなど、さまざまな入力デバイスによって発生します。 このプロパティを活用すると、リンクやボタンへのクリック・ホバー操作を無効化したり、逆に有効化したりできます。主な値は以下のとおりです。 auto：デフォルトの動作。要素が通常どおりポインターイベントに反応します。 none：要素がポインターイベントに反応しなくなります