CSS を使用して要素をアニメーション化された最終状態に維持するにはどうすればよいでしょうか?

CSS でアニメーション状態を維持する

CSS3 では、アニメーションによって要素に動的な動きが追加されますが、完了時にアニメーションが初期状態に戻るときに一般的な問題が発生します。これは、望ましい結果が永続的な変更であるシナリオでは問題になる可能性があります。

次の CSS アニメーションを考えてみましょう:

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

@-webkit-keyframes drop {
  from {
    -webkit-transform: translateY(0px);
  }
  to {
    -webkit-transform: translateY(100px);
  }
}</code>

このアニメーションは、要素を 100 ピクセル下にドロップします。ただし、アニメーションが完了すると、要素は元の位置に戻ります。

解決策: -webkit-animation-fill-mode を使用する

アニメーションの終了状態を維持するために、CSS は-webkit-animation-fill-mode プロパティ。このプロパティは、アニメーションの発生前後に要素に何が起こるかを制御します。これを forwards に設定すると、アニメーションが終了した後も要素は終了状態のままになります。

<code class="css">-webkit-animation-fill-mode: forwards;</code>

このアプローチにより、アニメーションが終了した後でも、アニメーション化された要素は変更された位置を保持することが保証されます。これにより、要素の外観をシームレスかつ永続的に変更できるため、循環プロセスを超えて複雑なアニメーションの価値が高まります。

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