CSS3 アニメーションを最終フレームで停止するにはどうすればよいですか?

最終フレームで CSS3 アニメーションを停止する

CSS3 アニメーションを使用する場合、フレームの最後にアニメーションを永久にフリーズすることが望ましい場合があります。その最後のフレーム。これは、要素を画面外に移動するアニメーションに特に役立ちます。

これを実現する 1 つの方法は、animation-fill-mode プロパティを利用することです。 forward に設定すると、アニメーション サイクルが完了した後でも、要素が最後のアニメーション フレームの外観を保持するようになります。

たとえば、「colorchange」という名前のキーフレームを持つ特定のアニメーションでは、

@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); }
}

最終フレームでアニメーションを永久に停止するには、animation-fill-mode: forwards; を追加します。アニメーション化された要素へ:

.animated-element {
  animation-name: colorchange;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

これにより、アニメーションが完了すると、要素は 0.5 にスケールされ、5 度回転され、100% キーフレームで指定された最終位置に移動されたままになります。

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