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

CSSのanimation-fill-mode: backwardsで最初のキーフレームのスタイル値を保持する方法

CSSでアニメーションを制御する際、animation-fill-modeプロパティにbackwardsを指定すると、アニメーション開始前の遅延期間中に、最初のキーフレームで定義されたスタイル値が要素に適用されます。
これにより、animation-delayで遅延を設けている場合でも、アニメーションが始まる前から最初のキーフレームの状態を維持でき、ページ読み込み時の不自然なちらつきやスタイルのずれを防ぐことができます。

サンプルコード

次の例では、div要素にanimation-fill-mode: backwardsを設定しています。アニメーション開始前には、@keyframesのfrom（最初のキーフレーム）で指定された「背景色：緑」「left: 0px」のスタイルが適用されます。

<!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の各値の違い

  • none（初期値）：アニメーションの実行時間外には、キーフレームのスタイルは一切適用されません。
  • backwards：遅延期間中（animation-delayの間）、最初のキーフレームのスタイルが適用されます。
  • forwards：アニメーション終了後も、最後のキーフレームのスタイルが保持されます。
  • both：backwardsとforwardsの両方の効果を持ちます。

補足

backwardsの効果を実際に確認したい場合は、animation-delayを追加してみてください。例えば「animation-delay: 1s;」を指定すると、アニメーション開始までの1秒間、要素が最初のキーフレームのスタイル（緑色の背景）で表示されることがわかります。

  1. CSSの:only-childセレクターを使って、親の唯一の子であるすべての<p>要素にスタイルを適用する方法

    CSSの:only-childセレクターを使用すると、親要素内で唯一の子要素として存在する<p>要素だけを選択し、スタイルを適用することができます。兄弟要素が1つでも存在する場合、その要素は対象外となるため、特定の構造を持つHTMLに対してピンポイントでデザインを指定したいときに非常に便利です。 :only-childセレクターの基本構文 p:only-child { /* スタイルの指定 */ } 実装例 以下のコードでは、2つの<div>要素の中に<p>タグが配置されています。最初の<div>には<p>要素が1つだけ含まれてい

  2. CSSでhr要素（水平線）のスタイルを設定する方法をわかりやすく解説

    CSSを使ってhr要素（水平線）のスタイルを設定するには、borderプロパティを活用します。hr要素はデフォルトではシンプルな1本の線として表示されますが、border-topやborder-radiusなどを組み合わせることで、実線・破線・二重線・点線・角丸など、さまざまなデザインに自由にカスタマイズできます。以下に、代表的な5種類の水平線スタイルを実装したサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html> <meta name="viewport" content="width=device-