Webkit CSS アニメーションの永続性について

CSS3 アニメーションを使用する場合、アニメーション要素が元の状態に戻ってしまうというシナリオがよく発生します。アニメーションの完成。この動作はアニメーション停止の標準ロジックと一致していますが、特定のユースケースでは直感に反するように見える場合があります。

Webkit CSS 構文を使用して、「drop_box」要素が 100 ピクセルをドロップするようにアニメーション化されている例を考えてみましょう。アニメーションが完了すると、ボックス内のテキストは最初の位置に戻ります。

永続化の問題への対処

この望ましくない動作を防ぐために、Webkit には -webkit が用意されています。 -animation-fill-mode プロパティ。このプロパティを使用すると、アニメーションの終了後に要素のスタイルをどのように維持するかを指定できます。 -webkit-animation-fill-mode: forwards を設定すると、アニメーションの終了状態を維持するようにブラウザーに指示し、要素が変換された位置に留まるようにします。

コード例

次の変更された CSS コードは、 -webkit-animation-fill-mode を使用して、アニメーションの終了状態を保持する方法を示しています。アニメーション:

.drop_box {
  -webkit-animation-name: drop;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
}

永続化の利点

-webkit-animation-fill-mode の使用: forwards にはいくつかの利点があります:

• End -状態保存: アニメーションの終了状態が維持され、よりスムーズな遷移とよりシームレスなビジュアルが可能になります。 experience.
• 複雑なアニメーションの制御: JavaScript なしでは実装が難しい複雑なアニメーションの作成が可能になります。
• ユーザー エクスペリエンスの向上: 終了状態を保持することにより、アニメーションがより自然で唐突さがなくなり、ユーザーの Web との全体的な対話が強化されます。 page.

結論

-webkit-animation-fill-mode を活用することで、Webkit ユーザーはアニメーション状態の反転の問題を克服し、洗練された永続性を実現できます。視覚効果。この技術により、Web 開発者は視聴者を魅了し、優れたユーザー エクスペリエンスを提供する魅力的でダイナミックな Web エクスペリエンスを作成できるようになります。