Daniel C. Wilson 解释了如何使用 CSS @keyframe 动画，当将多个动画应用于一个元素时，它们都会起作用。但如果任何属性重复，则只有最后一个属性起作用。它们会相互覆盖。我见过通过 将关键帧应用于嵌套元素 来克服此限制，这样您就不必处理这种冲突。
但是 JavaScript 中的 Web 动画 API (WAAPI) 有一种方法可以实现叠加动画。只需在选项中添加 composite: "add" 即可。例如
同样，使用 margin-left 将项目移动 20px + 30px（这不是移动对象的最佳性能方式，但它演示了长度的使用）… 如果动画同时运行，持续时间相同且方向相同，则 最终结果将移动 50px。
酷。对于 JavaScript 动画来说，这很好，但是 CSS 呢？我们什么时候才能实现它？也许。即使现在，您也可以通过一行 JavaScript 将叠加动画应用于现有的 CSS 动画。
el.getAnimations().forEach(animation => {
animation.effect.composite = 'add';
});有点像 不确定的复选框。它们存在，但无法在 HTML 或 CSS 中表达——您必须通过 JavaScript 将它们置于该状态。