如何精確控制CSS3動畫完成並刪除最後一格後的元素？

控制 CSS3 動畫完成

在 Web 開發領域，CSS3 動畫已成為增強使用者體驗的強大工具。 Однако，在設計需要精確控制其最終狀態的動畫時，在最後一幀停止它們可能會帶來挑戰。

本文解決了這樣的場景，其中多部分 CSS3 動畫在單擊時播放，最後一部分旨在從螢幕上刪除一個 div。不幸的是，動畫不斷地恢復到原始狀態。為了解決這個問題，我們探討了兩個解決方案：

1。凍結最後一格的動畫：

要凍結最後一格的動畫（100% 完成），我們使用 CSS 屬性 animation-fill-mode:forwards; 。該指令指示瀏覽器即使在動畫結束後也保持最終的動畫狀態。

2.在動畫之後刪除 Div：

或者，如果需要完全刪除 div，我們可以在動畫播放後使用 JavaScript 從 DOM 中刪除元素。這可以透過以下順序來實現：

document.getElementById("myDiv").addEventListener("animationend", function() {
  this.parentNode.removeChild(this);
});

當動畫完成時，會觸發「animationend」事件，導致 div 從頁面中刪除。

範例：

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

#myDiv {
  animation: colorchange 1s infinite;
  animation-fill-mode: forwards;
}

在此範例中，ID 為「myDiv」的 div 經歷動畫以縮放和旋轉變換結束。透過設定“animation-fill-mode:forwards;”，動畫結束後保留最終狀態。

以上是如何精確控制CSS3動畫完成並刪除最後一格後的元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！