element.animate()没反应的主因是duration未设（默认0ms）、缺fill:'forwards'导致样式复位、关键帧少于2项、元素已移出DOM或动画实例未保存。
必须显式调用 element.animate()，且保存返回的 Animation 实例，否则动画播完就失控、无法暂停或反转。
为什么 element.animate() 调了但没反应
常见原因不是语法错，而是关键配置缺失或 DOM 状态异常：
-
duration没设 —— 默认为0毫秒，动画瞬间完成，肉眼不可见 - 漏写
fill: 'forwards'—— 动画一结束，元素立刻跳回初始样式（比如opacity回到 0） - 关键帧数组为空或只有一项 —— 至少需要两个状态点（如
[{ opacity: 0 }, { opacity: 1 }]）才能插值 - 目标元素已被
remove()或从 DOM 移除 —— 关联动画自动进入finished状态，pause()无效
element.animate() 的最小可用参数组合
最简能动起来的写法，只包含浏览器强制要求的两项：
const anim = el.animate(
[{ opacity: 0 }, { opacity: 1 }],
{ duration: 1000, fill: 'forwards' }
);
注意：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
duration单位是毫秒，不是秒；写1就是 1 毫秒，基本看不到 -
fill: 'forwards'不是可选优化项，是控制最终样式的必要开关 - 返回值
anim必须赋值给变量，后续所有控制（pause()、reverse()）都依赖它 - 动画默认立即播放，不用手动调
play()
和 CSS 动画混用时的样式覆盖规则
Web Animations API 和 CSS @keyframes 共享同一套渲染引擎，但优先级明确：
-
element.animate()中声明的属性（如transform、opacity）会直接覆盖同名的 CSS 动画效果 - 未在 JS 关键帧中出现的属性（比如 CSS 里写了
color: red → blue，JS 动画只动opacity），照常运行 -
animation-play-state: paused这类 CSS 控制对 JS 创建的动画完全无效 - DevTools 的“Animations”面板会同时列出两者，状态一目了然，建议调试时必开
anim.pause() 没反应的排查重点
别急着重写逻辑，先查三件事：
- 执行
console.log(anim.playState)—— 若是'idle'表示根本没启动，'finished'表示已播完，只有'running'才能暂停 - 是否重复调用了
animate()却没cancel()上一个？旧动画还在后台跑，新动画覆盖样式，视觉混乱 - 监听
anim.onfinish比轮询playState更可靠，但注意：该事件只触发一次，且cancel()不会触发它
真正容易被忽略的是：动画实例一旦丢失引用（比如定义在函数作用域内没 return，或被 GC 回收），后续任何控制都归零。只要需要交互控制，anim 就得挂在能长期访问的位置，比如组件实例属性或全局 Map。
