CSS アニメーションを Webkit で終了した後もそのままにするにはどうすればよいですか?

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

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

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

永続性の問題への対処

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

コード例

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

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

永続化の利点

-webkit-animation-fill-mode: forwards を使用すると、次のような利点があります。

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

結論

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

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