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

最後一幀停止CSS3 動畫

使用CSS3 動畫時，可能需要在最後一幀永久凍結動畫它的最後一幀。這對於將元素移出螢幕的動畫特別有用。

實現此目的的一種方法是利用animation-fill-mode 屬性。當設定為向前時，即使在動畫週期完成後，它也確保元素保留其最後一個動畫影格的外觀。

例如，在給定的動畫中，關鍵影格名為「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中文網其他相關文章！