Web 動畫 API 提示和技巧
CSS 動畫使您能夠對構成文件和應用的元素進行令人難以置信的操作。有些事情可能並非顯而易見，許多巧妙的方法可能並不立即顯現。本文收集了一些我們發現的技巧，希望能讓您的工作更輕鬆，包括如何重新執行已完成的動畫。
重新執行動畫
CSS 動畫規範並未提供重新執行動畫的方法。一旦動畫結束，您就無法僅僅將元素的 animation-play-state 設定為 "running"。而是需要使用 JavaScript 來重播已完成的動畫。
這是一種穩定可靠的方法。
HTML
首先，讓我們定義要製作動畫的 <div> 元素的 HTML，以及一個用於播放（或重播）動畫的按鈕。
<div class="box"></div>
<button class="runButton">Run the animation</button>
CSS
讓我們使用 CSS 為該框設定樣式。
.box {
width: 100px;
height: 100px;
border: 1px solid black;
margin-bottom: 1rem;
}
JavaScript
接下來，我們將檢視實現功能的 JavaScript。當用戶點選執行按鈕時，將呼叫 playAnimation() 函式。我們不使用 @keyframes 規則，而是在 JavaScript 中定義關鍵幀。
const box = document.querySelector(".box");
const button = document.querySelector(".runButton");
/*
equivalent to the following CSS @keyframes
@keyframes colorChange {
0% {
background-color: grey;
}
100% {
background-color: lime;
}
}
*/
const colorChangeFrames = { backgroundColor: ["grey", "lime"] };
function playAnimation() {
box.animate(colorChangeFrames, 4000);
}
playAnimation 方法呼叫框上的 Element.animate() 方法來播放動畫。animate() 方法接受一個或多個關鍵幀物件以及動畫和動畫選項作為引數。在本例中，我們將 colorChangeFrames 關鍵幀物件和一個動畫持續時間傳遞給該方法。
我們還需要為執行按鈕新增一個事件處理程式，以便它真正執行操作。
button.addEventListener("click", playAnimation);
結果
等待動畫完成後再停止
在前面的示例中，如果使用者在動畫完成前單擊執行按鈕，當前動畫將 abruptly 停止，並從 0% 或 from 的起始關鍵幀重新開始。如果您希望當前動畫迭代在開始新動畫之前完成，我們可以在動畫執行時停用 run 按鈕，並根據 finish 事件重新啟用它。或者，如果您想啟用動畫的多個迭代，我們可以檢查元素上是否正在執行動畫，並在動畫執行時為每次按鈕點選增加 animation-iteration 計數。
在此示例中，我們將 playAnimation() 函式更新為在點選時停用按鈕，並監聽 finish 事件以重新啟用按鈕。
function playAnimation() {
button.setAttribute("disabled", true);
const anim = box.animate(colorChangeFrames, 4000);
anim.addEventListener("finish", (event) => {
button.removeAttribute("disabled");
});
}
程式碼停用按鈕並開始動畫。當動畫完成後，按鈕將被重新啟用。
動畫中的堆疊上下文
CSS 動畫期間進行動畫處理的屬性的行為，就像它們包含在 will-change 屬性宣告中一樣。任何在標記為 will-change 時會建立堆疊上下文的屬性，都會使元素接收新的堆疊上下文。
在 animation-fill-mode: forwards（以及 both）的情況下，動畫屬性在動畫完成後會保留在它們的最終關鍵幀狀態。這些屬性會保留 will-change 狀態，因此如果在動畫期間建立了新的堆疊上下文，並且在動畫結束時該堆疊上下文仍然存在，則目標元素在動畫完成後將保留該堆疊上下文。