如何讓 CSS3 動畫停留在最後一格？

在最後一幀停止CSS3 動畫

要防止動畫元素在動畫完成後恢復到其原始狀態，您可以使用動畫填充模式屬性。此屬性控制動畫結束後元素的行為。

解決方案：

要在最後一格 (100%) 停止動畫，請指定該值轉送動畫填滿模式屬性。這將指示瀏覽器在動畫完成後保持動畫的最終狀態。

這是添加了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;
  }
}

透過使用animation-fill- mode：前進，動畫完成後元素將保持其變換狀態。此外，可選的 CSS 轉換和動畫結束關鍵影格可用於在動畫完成後淡出或刪除元素。

以上是如何讓 CSS3 動畫停留在最後一格？的詳細內容。更多資訊請關注PHP中文網其他相關文章！