使用 promise 编排动画，通过可替换动画提升性能，使用复合模式让动画更流畅，等等。
如果使用得当，动画可改善用户对品牌的认知和记忆、引导用户操作并帮助用户浏览您的应用，从而在数字空间中提供背景信息。
Web Animations API 是一款工具，可让开发者使用 JavaScript 编写命令式动画。编写此代码是为了同时支持 CSS 动画和过渡的实现，并支持开发未来的效果以及组合和计时的现有效果。
Firefox 和 Safari 已经实现了所有规范功能，而 Chromium 84 为 Chrome 和 Edge 带来了许多以前不受支持的功能，可实现跨浏览器互操作性。
使用入门
如果您使用过 @keyframe 规则，应该非常熟悉通过 Web Animations API 创建动画。首先，您需要创建一个关键帧对象。CSS 中的效果示例：
@keyframes openAnimation {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
const openAnimation = [
{ transform: 'scale(0)' },
{ transform: 'scale(1)' },
];
在 CSS 中为动画设置参数的位置：
.modal {
animation: openAnimation 1s 1 ease-in;
}
进行如下设置：
document.querySelector('.modal').animate(
openAnimation, {
duration: 1000, // 1s
iterations: 1, // single iteration
easing: 'ease-in' // easing function
}
);
代码量大致是相同的，但使用 JavaScript，您获得了一些单靠 CSS 所不具备的超能力。这包括对效果进行排序的功能，以及更好地控制其播放状态的功能。
element.animate()以外
不过，经过更新后，Web Animations API 不再局限于通过 element.animate() 创建的动画。我们还可以操纵 CSS 动画和过渡。
getAnimations() 方法是返回某个元素的所有动画，无论该元素是通过 element.animate() 创建还是通过 CSS 规则（CSS 动画或过渡）创建。如下所示：
首先，您需要 "get" 转场的关键帧，以确定我们从何处进行转场。然后，您再制作两个新的不透明度动画，分别实现淡入淡出效果。淡入淡出后，删除副本。
使用 promise 编排动画
在 Chromium 84 中，您现在有两个可与 promise 搭配使用的方法：animation.ready 和 animation.finished。
animation.ready可让您等待待更改项生效（即在播放和暂停等播放控制方法之间切换）。animation.finished提供了一种在动画播放完毕后执行自定义 JavaScript 代码的方法。
我们继续看这个示例，并使用 animation.finished 创建一个编排的动画链。在此示例中，您有一个垂直转换 (scaleY)，接着是水平转换 (scaleX)，接着是对子元素的不透明度变化：
const transformAnimation = modal.animate(openModal, openModalSettings);
transformAnimation.finished.then(() => { text.animate(fadeIn, fadeInSettings)});
在执行动画链中的下一个动画集之前，我们已使用 animation.finished.then() 将这些动画链接起来。这样一来，动画就会按顺序显示，您甚至可以将效果应用到设置了不同选项（例如速度和轻松程度）的不同目标元素。
在 CSS 中，重新创建起来很麻烦，尤其是在对多个元素应用唯一但有序的动画时。您必须使用 @keyframe，列出正确的计时百分比来放置动画，并在触发序列中的动画之前使用 animation-delay。
示例：播放、暂停和倒放
能打开的，应该关闭的！幸运的是，自 Chromium 39 起，Web Animations API 为我们提供了播放、暂停和倒放动画的功能。
您可以截取上面的动画，并在再次点击该按钮时使用 .reverse() 为其赋予流畅的倒转动画效果。这样，你可以为模态窗口创建更顺畅、更符合情境的互动。
您可以创建两个待播放动画（openModal 和内嵌不透明度转换），然后暂停其中一个动画，将其延迟，直到另一个动画完成。然后，您可以使用 promise 来等待每个任务完成后再播放。最后，您可以检查是否设置了标志，然后倒放每个动画。
示例：与部分关键帧进行动态互动
selector.animate([{transform: `translate(${x}px, ${y}px)`}],
{duration: 1000, fill: 'forwards'});
在该示例中，只有一个关键帧，且未指定起始位置。这是一个使用部分关键帧的示例。鼠标处理程序会在此处执行一些操作：设置新的结束位置并触发新的动画。系统会根据当前的底层位置推断新的开始位置。
新的转换可以在现有转换仍在运行时触发。这意味着当前转换会中断，并且系统会创建新的转换。
通过可替换的动画提升了性能
基于事件（例如基于 'mousemove'）创建动画时，每次都会创建一个新动画，这可能会快速消耗内存并降低性能。为了解决此问题，Chromium 83 中引入了可替换的动画，从而实现了自动清理，其中已完成的动画会被标记为可替换，并且会在被其他已完成的动画替换后自动移除。请参考以下示例：
elem.addEventListener('mousemove', evt => {
rectangle.animate(
{ transform: translate(${evt.clientX}px, ${evt.clientY}px) },
{ duration: 500, fill: 'forwards' }
);
});
每次移动鼠标时，浏览器都会重新计算彗星轨迹中每个球的位置，并为这个新点创建动画。现在，浏览器可以在以下情况下移除旧动画（启用替换）：
- 动画播放完毕。
- 复合排序中有一个或多个动画也已完成。
- 新动画将为相同的属性添加动画效果。
通过将计数器与每个已移除的动画相关联，您可以使用 anim.onremove 触发计数器，您可以查看替换的动画的确切数量。
您还可以通过其他一些方法来进一步优化动画控件：
animation.replaceState()提供了一种方法来跟踪动画是处于活跃状态、持续播放还是已移除。animation.commitStyles()会根据底层样式以及元素上的所有动画以复合顺序更新元素的样式。animation.persist()用于将动画标记为不可替换。
使用复合模式可使动画更流畅
现在，您可以使用 Web Animations API 设置动画的复合模式，这意味着除了默认“替换”模式外，动画还可以叠加或累计。复合模式让开发者可以编写独特的动画，并控制效果的组合方式。现在支持三种复合模式：'replace'（默认模式）、'add' 和 'accumulate'。
当您合成动画时，开发者可以编写简短、独特的效果，并看到它们组合在一起。在以下示例中，我们要将旋转和缩放关键帧应用于每个框，唯一的调整是合成模式，添加为选项：
在默认的 'replace' 复合模式下，最终动画将替换转换属性，并结束于 rotate(360deg) scale(1.4)。对于 'add'，合成会添加旋转角度并乘以缩放，从而得到最终状态为 rotate(720deg) scale(1.96)。'accumulate' 组合转换，生成 rotate(720deg) scale(1.8)。如需详细了解这些复合模式的复杂性，请参阅网页动画规范中的 CompositeOperation 和 CompositeOperationOrAuto 枚举。
我们来看一个界面元素示例：
在此示例中，我们合成了两个 top 动画。第一个是宏动画，会将下拉菜单按菜单本身的整个高度移动，呈现为从页面顶部滑入的效果；第二个则是微动画，在贴近底部时应用略微弹跳。使用 'add' 复合模式可以实现更顺畅的过渡。
const dropDown = menu.animate(
[
{ top: `${-menuHeight}px`, easing: 'ease-in' },
{ top: 0 }
], { duration: 300, fill: 'forwards' });
dropDown.finished.then(() => {
const bounce = menu.animate(
[
{ top: '0px', easing: 'ease-in' },
{ top: '10px', easing: 'ease-out' },
{ ... }
], { duration: 300, composite: 'add' });
});
Web Animations API 的未来发展趋势
这些都是对当今浏览器中动画功能的激动人心的新增功能，并且正在陆续推出更多功能。请查看这些未来的规范，进一步了解即将推出的功能：