Web Animations API需显式调用element.animate()并保存Animation实例才能控制；关键帧数组与timing对象缺一不可，fill:'forwards'和duration必须显式设置，否则动画无效或跳回初始态。
Web Animations API 不是“加个属性就能动”，它需要显式调用 element.animate()，且返回的 Animation 对象必须保存引用才能控制——漏掉这步，动画播完就失控。
怎么用 element.animate() 启动最简动画
核心就是两件事：传关键帧数组 + 传 timing 配置对象。不写 fill: 'forwards'，动画一结束元素就跳回初始状态；不设 duration，默认是 0ms，相当于没播。
-
keyframes可以是数组（推荐）：每个对象描述一个时间点的状态，比如[{ opacity: 0 }, { opacity: 1 }]，浏览器自动按时间轴插值 -
options中duration单位是毫秒，不是秒；easing支持 CSS 缓动关键字（'ease-in-out'）、贝塞尔曲线（'cubic-bezier(0.42,0,0.58,1)'），但不支持'step-start'这类步进函数 - 动画立即播放，不需要手动调
play()；但如果你之后要暂停或反转，必须把返回值存成变量，例如const anim = el.animate(...)
为什么 anim.pause() 没反应
常见原因是：动画已结束、被取消，或根本没拿到有效的 Animation 实例。尤其注意 DOM 元素被移除后，关联的动画会自动进入 finished 状态，再调 pause() 无效。
- 检查
anim.playState：值为'idle'表示未启动，'running'才能暂停，'finished'或'cancelled'时调pause()无效果 - 不要重复调
animate()创建新动画而不 cancel 旧的——老动画还在跑，新动画覆盖样式，视觉错乱 - 监听
anim.onfinish事件比轮询playState更可靠，但注意该事件只触发一次，且动画被cancel()时不触发
和 CSS @keyframes 动画混用时的冲突点
CSS 动画和 Web Animations API 共享同一套底层动画引擎，但优先级不同：element.animate() 的关键帧会覆盖同名 CSS 动画属性（如 transform、opacity），但不会影响未声明的属性（比如你 JS 动画只改 opacity，CSS 里定义的 color 动画照常运行）。
立即学习“前端免费学习笔记（深入）”；
- 如果页面已有
animation: slide 2s infinite;，又对同一元素调animate([{ transform: 'none' }], { duration: 1000 })，则transform被接管，color等其他属性仍走 CSS 动画 -
animation-play-state: paused这类 CSS 控制对 JS 创建的动画无效；反过来，anim.pause()也不会影响纯 CSS 动画 - 调试时看 DevTools 的 “Animations” 面板，里面会同时列出 CSS 和 JS 创建的动画实例，状态一目了然
兼容性与 polyfill 的实际取舍
Chrome 36+、Firefox 48+、Safari 16.4+、Edge 79+ 原生支持；iOS Safari 16.4 之前需 polyfill，但要注意：polyfill 无法实现真正的合成器线程动画，所有动画都在主线程执行，复杂场景下可能卡顿。
- 简单交互动画（hover 暂停、点击触发）用原生 API 完全够用；高帧率滚动联动或长序列动画，优先考虑 CSS
@keyframes+animation-play-state - 引入
web-animations-jspolyfill 后，Element.animate()才可用，但document.timeline等高级特性仍不可用 - 别在 polyfill 环境下依赖
Animation.effect.getComputedTiming()—— 返回值可能不准确，尤其涉及嵌套变换时
真正容易被忽略的是：动画时间轴并非完全独立。多个 animate() 调用在同一元素上叠加时，浏览器按插入顺序合并效果，但缓动函数和持续时间不自动对齐——你得自己算好各段动画的 delay 和 duration，否则视觉节奏会断裂。
