element.animate() 返回的 Animation 对象不支持链式调用，连续调用会中断前一个动画；需通过监听 finish 事件实现逻辑衔接，而非语法链式。
animate() 返回的 Animation 对象本身不支持链式调用
直接对 element.animate() 的返回值连续调用 animate() 不会叠加动画，而是会**中断前一个动画并新建一个**。这是因为每次调用都会创建新 Animation 实例，且浏览器只允许每个元素同一时间对同一属性最多有一个“正在运行”的动画（除非显式暂停或移除旧的）。
想实现多段动画衔接，得靠 Animation 对象的事件监听和手动控制
核心思路是：等前一段动画结束（onfinish 或 addEventListener('finish', ...)），再触发下一段。这不是语法上的链式（如 .animate(...).animate(...)），而是逻辑上的串行控制。
-
Animation对象没有.then()或.chain()方法，不能像 Promise 那样链式写 - 必须监听
finish事件，而不是依赖play()返回值继续调用 - 注意：如果前一段动画被用户交互（如 hover）提前暂停或取消，
finish可能不会触发，需同时监听cancel
一个可复用的两段动画衔接示例
const el = document.querySelector('#box');
const anim1 = el.animate([
{ opacity: 0, transform: 'scale(0.8)' },
{ opacity: 1, transform: 'scale(1)' }
], { duration: 300 });
anim1.addEventListener('finish', () => {
const anim2 = el.animate([
{ backgroundColor: '#ff0' },
{ backgroundColor: '#00f' }
], { duration: 600 });
// 可选：保存引用以便后续控制（如取消整个链条）
window.anim2 = anim2;
});
这里没有“链式语法”，但实现了“链式行为”。关键点：
- 不要在
anim1.play()后直接写.animate(...)—— 这属于对 DOM 元素调用，不是对Animation对象 - 若需三段以上，把第二段的
finish监听放在第二段内部，以此类推（避免回调地狱可用 async/await 封装） - 使用
anim1.onfinish = () => {...}也可，但只能绑定一个；推荐addEventListener更灵活
更可控的方式：用 AnimationTimeline 或 Web Animations API 手动调度
如果动画段数多、时序复杂（比如重叠、延迟启动、循环嵌套），硬靠 finish 容易失控。此时应考虑：
立即学习“前端免费学习笔记（深入）”；
- 用
document.timeline创建自定义时间线，统一管理所有Animation实例的startTime - 把每段动画的
effect（KeyframeEffect）单独构造，再传给新Animation，便于复用和调试 - 避免反复调用
element.animate()—— 它会隐式创建新Animation并可能覆盖已有动画组
真正难的不是“怎么写两行 animate”，而是“怎么让五段动画在用户中途点击时还能优雅降级”。这需要你主动持有所有 Animation 引用，并在必要时调用 cancel() 或 reverse()，而不是指望链式语法自动帮你兜底。
