Webkit CSS アニメーションを最終状態に固定するにはどうすればよいですか?

Webkit CSS アニメーションの終了状態の保存: 永続的な解決策

この問題は、CSS3 アニメーションの一時的な性質に起因します。要素のスタイルを変更し、完了時に初期設定に戻します。これにより、突然の遷移や視覚的な不一致が発生する可能性があります。これに対処するために、Webkit では -webkit-animation-fill-mode プロパティを使用した解決策を導入しています。

回答:

-webkit-animation-fill-mode を利用する。開発者はアニメーションのスティッキーな終了状態を実現できます。 「forwards」に設定すると、アニメーション中に適用された変更されたスタイルは、アニメーションが終了した後も保持されます。これにより、要素の終了位置が確実に保持されます。

例:

<code class="css">.drop_box {
  -webkit-animation-name: drop;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
}</code>

この例では、「Hello world」テキストが期待通りにアニメーションし、100 ピクセル下がります。ただし、最初のシナリオとは異なり、この最終位置に留まり、不要なジャンプや突然の遷移を防ぎます。

以上がWebkit CSS アニメーションを最終状態に固定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。