CSS3 アニメーションを最後のフレームに留めておくにはどうすればよいですか?

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

アニメーションの完了後にアニメーション要素が元の状態に戻らないようにするには、次の操作を実行できます。 anime-fill-mode プロパティを使用します。このプロパティは、アニメーション終了後の要素の動作を制御します。

解決策:

アニメーションを最後のフレーム (100%) で停止するには、値を指定します。 anime-fill-mode プロパティの転送。これにより、アニメーションの終了後にアニメーションの最終状態を維持するようにブラウザーに指示されます。

forwards 値が追加された更新された CSS コードは次のとおりです。

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

.animated-element {
  animation: colorchange 1s infinite;
  animation-fill-mode: forwards;
  /* Optional: remove the element after the animation finishes */
  transition: 0.5s ease opacity;
  animation-end: hide-element;
}

@keyframes hide-element {
  100% {
    opacity: 0;
  }
}

アニメーションフィルを使用することにより、 mode: forwards の場合、要素はアニメーションが終了した後も変換された状態のままになります。さらに、オプションの CSS トランジションとアニメーション終了キーフレームを使用して、アニメーションの完了後に要素をフェードアウトまたは削除することができます。

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