CSS3 アニメーションの完了を正確に制御し、最終フレームの後の要素を削除するにはどうすればよいですか?

CSS3 アニメーションの完了の制御

Web 開発の領域では、CSS3 アニメーションはユーザー エクスペリエンスを向上させる強力なツールとなっています。終了状態を正確に制御する必要があるアニメーションをデザインする場合、最後のフレームでアニメーションを停止することが課題となる可能性があります。

この記事では、マルチパート CSS3 アニメーションがクリック時に再生されるシナリオについて説明します。最後の部分は画面から div を削除することを目的としています。残念ながら、アニメーションは継続的に元の状態に戻ります。この問題を解決するために、次の 2 つの解決策を検討します。

1.最後のフレームでアニメーションをフリーズする:

最後のフレームでアニメーションをフリーズするには (100% 完了)、CSS プロパティ animation-fill-mode: forwards; を使用します。 。このディレクティブは、アニメーションが終了した後でも最終的なアニメーション状態を維持するようにブラウザーに指示します。

2.アニメーション後の Div の削除:

また、Div を完全に削除したい場合は、アニメーションの再生後に JavaScript を使用して DOM から要素を削除できます。これは、次のシーケンスで実現できます:

document.getElementById("myDiv").addEventListener("animationend", function() {
  this.parentNode.removeChild(this);
});

アニメーションが完了すると、「animationend」イベントがトリガーされ、ページから div が削除されます。

例:

@keyframes colorchange {
  0%   { transform: scale(1.0) rotate(0deg); }
  50%  { transform: rotate(340deg) translate(-300px,0px) }
  100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}

#myDiv {
  animation: colorchange 1s infinite;
  animation-fill-mode: forwards;
}

この例では、ID「myDiv」の div にアニメーションが適用されます。最後にスケールと回転の変換を行います。 「animation-fill-mode: forwards;」を設定すると、アニメーション終了後も最終状態が保持されます。

以上がCSS3 アニメーションの完了を正確に制御し、最終フレームの後の要素を削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。