CSS Animation-Fill-Modeプロパティの理解

コアポイント

• cssanimation-fill-mode属性は、アニメーションの実行前後のスタイルの適用方法を制御します。 none forwardsbackwards値アニメーションが終了した後、アニメーションの最後のキーフレームで定義されたスタイルが元のスタイルに復元されるのではなく、要素に残っていることを確認します。 both
• 値は、アニメーションが開始される前の遅延中に、最初のキーフレームのスタイルを要素に適用します。 forwards
• 値は、backwardsと
の効果を組み合わせて、アニメーションが開始される前に最初のキーフレームのスタイルを適用し、アニメーションが終了した後に最後のキーフレームのスタイルを保持します。
• both forwardsほぼすべてのフロントエンド開発者がCSSキーフレームベースのアニメーションを使用しています。一部の人々は、この機能を使用して、かなり複雑なデモと実験を作成することさえあります。 backwards
トピックの完全な紹介が必要な場合は、2011年のSmashing Magazineに関する私の投稿はまだ良い選択です。ただし、この記事では、CSSアニメーション仕様の1つのコンポーネントである

属性に焦点を当てたいと思います。

これは、理解しにくい唯一のアニメーションベースのプロパティです。たとえば、誰も

、animation-fill-modeなどについて混乱することはありません...しかし、「塗りつぶしモード」とはどういう意味ですか？簡単に考えて、いくつかの例を挙げましょう。

animation-nameanimation-durationgrammar

基本的なキーフレームアニメーションがfill-modeルールを使用して定義されていることを既に知っているかもしれません。ただし、キーフレームをアニメーション名に関連付けない限り、キーフレームは機能しません。これは略式されたアニメーション属性宣言です。あなたは私が意味することを理解できます：

もちろん、この同じ行の略語は次のように拡張できます。 @keyframes の両方の例では、

属性は最後に定義され、どちらの場合も値は「

.example {
  animation: myAnim 2s 500ms 2 normal ease-in forwards;
}

」に設定されています。最後に定義する必要はありませんが、これは良い習慣かもしれません。

同様に、CSSアニメーションを使用したことがない場合でも、上記のステートメントのすべてが

を除外するものを把握できる場合があります。

.example {
  animation-name: myAnim;
  animation-duration: 2s;
  animation-delay: 500ms;
  animation-iteration-count: 2;
  animation-direction: normal;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

animation-fill-modeforwardsの規範的な定義

では、この属性について仕様はどのように言っていますか？

animation-fill-mode

属性は、アニメーション実行時間外に適用される値を定義します。

説明し続けると、「外部実行時間」の時間とは、アニメーションが要素に適用される時間と要素が実際にアニメーションに始まる時間との間の時間を指します。基本的に、fill-mode値を使用して、アニメーションの実行時間の外側でアニメーション要素がどのように見えるかを定義できますが、アニメーションが適用された後です。混乱するように聞こえるかもしれませんが、あなたはすぐに私が意味することを理解するでしょう。

各可能な値を調べて、この基本的な定義を拡張しましょう（まだ少し混乱している可能性があります）。

分解値

animation-fill-mode属性は、4つの値のいずれかを受け入れることができます。各値の内訳は次のとおりです。 none forwards値：backwards both

これは、

の初期値またはデフォルト値です。 JavaScriptを使用して他の値から変更するか、カスケード内の何かを上書きしている場合を除き、none値を定義することは冗長になります。

animation-fill-mode値を理解するために、ここにnoneのないアニメーションを示すCodepenデモンストレーションがあります（その値は

）：

none[Codepenデモリンク（実際のリンクに置き換えてください）] animation-fill-mode noneほとんどの場合、

の充填モードはあなたが望むものではないことがわかります。

は、要素がアニメーション実行時間の外側にどのように見えるかを定義することを忘れないでください。

この例では、ボールは最初は赤く、次に右に移動しながら徐々にピンクになり、同時にサイズを変えます。ボールが小さくピンクのままで、アニメーションが終わった直後に、より良いでしょう。これにより、アニメーションが終了した後、醜いジャンプが最初の状態に戻るのを防ぎます。

none値：fill-mode

ボールのアニメーションを

値に変更しましょう。

[Codepenデモリンク（実際のリンクに置き換えてください）] forwards

これで、

を使用することの利点と、fill-mode値が他のどの値よりも使用される理由を確認できます。この値でそれを定義するとき、最後のキーフレームで定義されているように、アニメーション要素が最終スタイルセットを保持することをブラウザに伝えます。これにより、アニメーションが終了した後、要素がアニメーションを開始する前に初期状態に戻ることはありません（デモで追加した「リセット」ボタンはこれを行うことができます）。 forwards

値：

値をanimation-fill-modeに変更しましょう - 今何が起こっていますか？ forwards

[Codepenデモリンク（実際のリンクに置き換えてください）]

このデモの動作は、「backwards」の値を持つ最初のデモとまったく同じであることに注意してください。なぜこれが起こっているのですか？

backwardsに反して、アニメーションが終了した後にアニメーションが始まる前に、

値は要素にそのスタイルを与えます。これは、

：

の値の仕様の説明を見ると、より理にかなっています

animation-delayで定義された期間中、アニメーションは、アニメーションの最初の反復が開始されるキーフレームで定義された属性値を適用します。これらは、fromキーフレームの値またはtoキーフレームの値です。

これを実証するために、私はデモに2つの変更を加えました：

a
• キーフレームを追加して、ボールに異なる色を使用しました。 from
• 属性を使用して追加の遅延が追加されました。 animation-delay

ここにあります：

[Codepenデモリンク（実際のリンクに置き換えてください）]

「アニメーションの開始」ボタンを押すと、ボールが青くなることがわかります。これは、明らかな遅延のためです。技術的には、各アニメーションにはデフォルトの遅延がありますが、遅延は0です。この場合、最初のキーフレームのスタイルがアニメーションが開始される前にスタイルが同じである場合、

の値は実際には表示されません。そして、あなたもそれを見ることができません。同じスタイルと同じ遅延を使用している場合、backwards値を削除すると、アニメーションが始まる前にボールが赤のままになります。 backwards 正直に言うと、私は

値の多くの実用的な使用を実際に見ていませんでした。あまりにも多くの場合、アニメーションの最初のキーフレームのスタイルは、要素アニメーションの前の静的状態とは異なることを想像するのは困難です。しかし、アイデアがあれば、いくつかのユースケースを聞きたいです。

backwards値：

both私たちが表示する最後の値は

値です。この値は、ブラウザが

とbothの効果を適用するように指示します。 forwards backwardsデモに同じスタイルを保持し、

値に割り当てると何が起こるか見てみましょう。

[Codepenデモリンク（実際のリンクに置き換えてください）] both

ロケット科学ではありません。ご覧のとおり、最初の遅延中に、最初のキーフレームスタイルが適用され、アニメーションが終了し、最後のキーフレームのスタイルが凍結されます（前述のように、これは通常あなたが望むものです）。繰り返しますが、この値は、最初のキーフレームで定義されている遅延と代替色のために

を使用することとそれほど違いはありません。

forwardsいくつかの予防策とヒント

上記のコンテンツと仕様の詳細に基づいて、次のことは次のとおりです。

• backwards値とboth
値の重要性をやや最小限に抑えましたが、これらの値は、スクリプトまたはユーザー入力によって制御される複雑なアニメーションで役立つ場合があります。ユースケースはたくさんあります（ゲーム：ゲーム）が、実験と革新を通してのみです。
• animation-directionreverseプロパティがforwardsに設定されている場合、backwardsおよび
値の効果が逆になります。デモをいじると、それがどのように機能するかがわかります。
• animation-fill-mode
は4つの値のみを受け入れると言いましたが、CSS範囲属性値も使用できることを忘れないでください。
• animation-fill-mode仕様の以前のバージョンでは、
は略語アニメーションプロパティの一部ではありませんでしたが、キーフレームをサポートするすべてのブラウザは略語に使用できるようです。
• fill-modeアニメーションの略語を使用してアニメーションのカスタム名を選択する場合、有効なreverse値（「forwards "または「fill-mode値であると仮定して、略語宣言。

結論

この要約が、このプロパティをよりよく理解するのに役立つことを願っています。いくつかの研究は、私がそれをよりよく理解するのに本当に役立ちました。 animation-fill-modeについてユニークなことをした場合、または異なる値のユニークなユースケースがある場合、またはこの記事の修正がある場合は、ディスカッションでお知らせください。

CSSアニメーションフィルモードのプロパティに関する

FAQ css

属性の意味は何ですか？

animation-fill-modeCSS

プロパティは、CSSアニメーションの重要な側面です。実行前後のアニメーションがターゲットにスタイルを適用する方法を定義します。このプロパティは、アニメーション中の要素の中間状態を制御するのに役立ちます。 4つの値を取ることができます：

、animation-fill-mode、none、およびforwards。各値は、アニメーションが異なる段階で要素にどのように影響するかを決定するため、開発者はアニメーションをより強く制御できます。 backwards both

の

値はどのように機能しますか？ animation-fill-mode 属性内のforwardscss

値は、アニメーションプロセス中に遭遇した最後のキーフレームの要素が設定された計算値を保持することを保証します。これは、アニメーションが終わった後、最後のキーフレームで定義されているスタイルが元のスタイルに復元されるのではなく、要素に残ることを意味します。

animation-fill-modeforwardsの値を説明できますか？

css animation-fill-modebackwardsプロパティの値は、アニメーションが開始される前の期間中に、最初のキーフレームのスタイルを要素に適用します。これは、アニメーションが開始される前に遅延がある場合、要素はその遅延中に最初のキーフレームで定義されたスタイルを取ることを意味します。

animation-fill-modeのbothの価値は何を意味しますか？

cssanimation-fill-mode属性の値は、bothとforwardsの効果を組み合わせます。これは、アニメーションが始まる前に最初のキーフレームのスタイルを適用し、アニメーションが終了した後に最後のキーフレームのスタイルを保持することを意味します。 backwards

プロパティがanimation-fill-modeに設定されているとどうなりますか？ none

css

プロパティがanimation-fill-modeに設定されている場合、アニメーションは、開始前または開始後の要素にどのスタイルにも適用されません。要素は、アニメーションのアクティブな操作中にアニメーションのみによって影響を受けます。 none

属性に複数の値を使用できますか？ animation-fill-mode

いいえ、CSS

属性は一度に1つの値のみを取得できます。アニメーションの特定の要件に応じて、animation-fill-mode、none、forwards、backwards、またはbothから選択できます。

すべてのブラウザはanimation-fill-mode属性をサポートしていますか？

CSSanimation-fill-modeプロパティは、Chrome、Firefox、Safari、Edgeなど、すべての最新のブラウザで広くサポートされています。ただし、Internet Explorerではサポートされていません。

animation-fill-mode属性はどのようにanimation-delay属性と相互作用しますか？

cssanimation-fill-modeプロパティはanimation-delayプロパティで動作します。 animation-fill-modeがbackwardsまたはbothに設定されている場合、animation-delayが存在する場合、最初のキーフレームのスタイルが遅延中に適用されます。

animation-fill-mode属性は、パーセント値のキーフレームで使用できますか？

はい、CSS animation-fill-mode属性は、パーセント値のキーフレームで使用できます。 forwardsおよびbackwards値は、それぞれキーフレームの最も近い0％と100％のスタイルを適用します。

animation-fill-mode属性のデフォルト値は何ですか？

cssanimation-fill-mode属性のデフォルト値はnoneです。これは、デフォルトでは、アニメーションが起動前または開始後の要素にどのスタイルにも適用されないことを意味します。

CodePenリンクをプレースホルダーに置き換えたことに注意してください。記事を完成させるには、実際のCodePenデモリンクを提供する必要があります。

以上がCSS Animation-Fill-Modeプロパティの理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。