【CSS Modules】animation-fill-modeプロパティの使い方
animation-fill-modeプロパティの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
animation-fill-modeプロパティは、CSSアニメーションが適用される要素に対して、アニメーションの実行前と実行後にそのスタイルをどのように適用するかを制御するプロパティです。このプロパティを設定することで、アニメーションが開始するまでの遅延期間中や、アニメーションが終了した後の要素の状態を細かく調整することができます。
このプロパティにはいくつかの値があります。まず、デフォルト値であるnoneは、アニメーションが実行される前も後も、要素にアニメーションによって定義されたスタイルを適用しません。アニメーションが終了すると、要素はアニメーション適用前の元の状態に戻ります。
次に、forwardsは、アニメーションが終了した後、アニメーションの最後のキーフレームで定義されたスタイルを要素に保持させます。これにより、アニメーションが完全に停止した後も、要素はその最終的な状態を維持し続けることが可能です。
backwardsは、アニメーションが開始されるまでの遅延期間中に、アニメーションの最初のキーフレームで定義されたスタイルを要素に適用します。これは、アニメーションが始まる前から、要素がどのように変化するのかを示す場合に役立ちます。
そして、bothは、forwardsとbackwardsの両方の振る舞いを組み合わせたものです。具体的には、遅延期間中は最初のキーフレームのスタイルを適用し、アニメーション終了後は最後のキーフレームのスタイルを保持します。
これらの値を適切に使い分けることで、ウェブページ上のアニメーションの見た目を、より意図した通りに柔軟にコントロールできるようになります。
構文(syntax)
1.example-element { 2 animation-fill-mode: forwards; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません