web animations api 不能替代 css 动画，而是仅接管显式声明的属性（如 transform、opacity），其余属性仍由 css 规则控制；常见失效原因包括 duration 未设为正数、未设 fill: 'forwards'、关键帧少于两个对象，或元素未完成样式计算就调用 animate()。
Web Animations API 不能“替代”CSS动画，而是接管特定属性的控制权——你调用 element.animate() 后，JS 动画会覆盖同名 CSS 属性（如 transform、opacity），但其余未声明的属性仍走 CSS 规则。
为什么 element.animate() 没反应或动画一闪就回退
最常见原因是关键帧和 timing 配置缺一不可，且两个参数都必须显式传入：
-
duration必须设为大于 0 的毫秒数；默认是0，等于没播 -
fill: 'forwards'必须显式写上，否则动画结束立即恢复初始样式（比如transform归零、opacity回 1） - 关键帧数组至少含两个对象，例如
[{ opacity: 0 }, { opacity: 1 }]；单个对象无法插值 - 如果元素刚插入 DOM 就调用
animate()，可能因样式未计算完成导致异常，可加requestAnimationFrame(() => el.animate(...))缓一帧
如何让 JS 动画和已有 CSS @keyframes 共存不冲突
浏览器底层共用同一动画引擎，但控制粒度不同：JS 动画只劫持它声明过的属性，其余照常由 CSS 管理。
- 假设 CSS 定义了
animation: pulse 2s infinite;，其中@keyframes pulse改background-color和transform - 此时对同一元素执行
el.animate([{ opacity: 0 }], { duration: 1000 })，只有opacity被接管，background-color和transform仍按 CSS 动画跑 - 若想完全停掉 CSS 动画，得先清样式：
el.style.animation = 'none'；反之，anim.pause()对纯 CSS 动画无效 - 调试时打开 DevTools → “Animations” 面板，能同时看到 CSS 和 JS 创建的动画实例及其
playState
为什么 anim.pause() 没效果
不是方法错了，而是动画状态已不支持暂停——常见于以下几种情况：
-
anim.playState === 'finished'或'idle'：前者表示已播完且未设置iterations，后者表示根本没启动；只有'running'才能暂停 - DOM 元素被移除后，关联动画自动进入
finished状态，再调pause()无反应 - 重复调用
el.animate()创建新动画，但没cancel()旧的，老动画仍在后台运行，新动画覆盖样式，视觉混乱，状态也难同步 - 监听
anim.onfinish比轮询playState更可靠，但注意该事件只触发一次，且cancel()不会触发它
真正难的是时机判断和状态清理：动画是否还在 DOM 上？上次的 Animation 实例还持有引用吗？CSS 样式有没有意外覆盖 JS 设置的 fill 或 animation-play-state？这些细节不处理，再精细的控制也会失效。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
