如何控制 CSS3 動畫完成後的行為？

控制 CSS3 動畫結束行為

創建引人入勝的 CSS3 動畫時，通常需要控制它們在完成時的行為。一個常見的要求是在最後一幀凍結動畫。

在最後一幀凍結動畫

提供的程式碼示範了一個由四部分組成的動畫，最後將目標元素移出螢幕。然而，執行後它會重複返回其原始狀態。為了解決這個問題，我們可以利用animation-fill-mode屬性。

animation-fill-mode: forwards;

將此屬性設為forward，動畫完成後將保持其最終狀態。該元素將在動畫的最後一幀 (100%) 上凍結。

或者，如果您希望在動畫結束後從頁面中完全刪除該元素，您可以應用以下方法：

-webkit-animation-end: animation_final_frame;

這裡，animation_final_frame 是動畫結束時將執行的CSS 函數的名稱。在該函數中，您可以新增邏輯以使用 JavaScript 或 jQuery 從 DOM 中刪除元素。

動畫填充模式信息

有關動畫填充模式的更多詳細信息，請參閱 Mozilla Developer網絡 (MDN) 或查閱 CanIuse 上的瀏覽器支援列表。

以上是如何控制 CSS3 動畫完成後的行為？的詳細內容。更多資訊請關注PHP中文網其他相關文章！