HTML怎么做Web Animation API_html Web Animation API动画教程速查

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-js polyfill 后，Element.animate() 才可用，但 document.timeline 等高级特性仍不可用
• 别在 polyfill 环境下依赖 Animation.effect.getComputedTiming() —— 返回值可能不准确，尤其涉及嵌套变换时

真正容易被忽略的是：动画时间轴并非完全独立。多个 animate() 调用在同一元素上叠加时，浏览器按插入顺序合并效果，但缓动函数和持续时间不自动对齐——你得自己算好各段动画的 delay 和 duration，否则视觉节奏会断裂。