在最後一幀停止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中文網其他相關文章！
