Web Animations API 关键帧与性能实践：动画控制、合成与指标验证

背景与价值原生动画控制（播放、暂停、反转、加速）与合成层优化减少重排与重绘，提升流畅度与可维护性。基本动画const el = document.querySelector('.box')!;

const anim = el.animate([

{ transform: 'translateY(0)', opacity: 1 },

{ transform: 'translateY(-20px)', opacity: 0.8 }

], { duration: 300, easing: 'ease-out', fill: 'both' });

anim.onfinish = () => console.log('done');

控制与时间线anim.pause();

anim.playbackRate = 1.5;

anim.play();

合成层与样式优化优先使用 `transform` 与 `opacity`，避免触发布局；使用 `will-change` 指示潜在变化。.box { will-change: transform, opacity }

指标验证（Chrome 128/Edge 130）帧率：交互动画稳定 ≥ 60fps。INP：动画触发与交互无显著劣化（P95 ≤ 200ms）。丢帧率：≤ 3%。回退策略不支持 WAAPI：回退为 CSS 动画或 `requestAnimationFrame`。测试清单高密度触发：多元素并发动画仍稳定；控制方法工作正常。