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 状态，因此如果在动画期间创建了新的堆叠上下文，并且在动画结束时该堆叠上下文仍然存在，则目标元素在动画完成后将保留该堆叠上下文。