调用 KeyframeEffect.setKeyframes() 不会自动刷新动画，必须先 cancel 再 setKeyframes 后 play；关键帧属性需严格一致，避免混用写法或新增字段；应节流调用并优先使用 updateTiming 或 currentTime 微调。
KeyframeEffect.setKeyframes 为什么调用后动画没变化
直接调用 setKeyframes() 不会自动重播或刷新动画，它只更新关键帧数据，但浏览器不会主动重新采样——除非你手动触发重放、重置或强制重绘。常见现象是调用后页面动画“卡住”或毫无反应。
根本原因是：动画仍在运行中，setKeyframes() 并不隐式调用 cancel() 或 play()，它只是替换内部 keyframes 数组。
- 必须先
animation.cancel()再setKeyframes()，然后animation.play() - 或者用
animation.effect.setKeyframes(newKeyframes)后，显式调用animation.pause(); animation.play();（部分浏览器需 pause/play 组合才能触发重采样） - 若动画已结束且未设置
fill: 'forwards'，setKeyframes()可能完全无视觉反馈——因为元素已回到初始状态
setKeyframes 接收的 keyframes 格式必须严格匹配原始结构
传入 setKeyframes() 的数组不能随意增减属性，也不能混用长写法和简写法。比如原始 keyframes 是 [{ opacity: 0 }, { opacity: 1 }]，你却传 [{ opacity: 0, transform: 'scale(1)' }, { opacity: 1, transform: 'scale(1.2)' }]，Chrome 会静默忽略新增的 transform 字段（Firefox 更严格，可能抛 TypeError）。
- 所有帧对象的属性集合必须一致：如果第一帧有
transform，后续每帧都得有（哪怕值为'none'） - 百分比位置（如
{ offset: 0.3 }）可以省略，但一旦出现，就必须全部显式指定，否则行为不可控 - 不要混用
offset和ease等 timing 属性——setKeyframes()只接受样式属性，timing 信息属于AnimationEffectOptions，不在 keyframes 数组里
动态修改时如何避免 layout thrashing 和性能抖动
频繁调用 setKeyframes() + play() 容易触发同步布局计算，尤其在 scroll 或 pointermove 中。典型错误是监听 input 实时改动画帧，结果滚动卡顿。
立即学习“前端免费学习笔记（深入）”；
- 用
requestAnimationFrame()节流：只在下一帧更新，避免多次 setKeyframes 积压 - 避免在
setKeyframes()前读取element.offsetLeft、getComputedStyle()等触发 layout 的操作 - 如果只是微调数值（如根据鼠标 X 坐标缩放），优先用
animation.effect.updateTiming({ duration: ... })或直接改animation.currentTime，比重设 keyframes 更轻量
兼容性与 polyfill 注意点
KeyframeEffect.setKeyframes() 在 Safari 16.4+ 和 Chrome 115+ 才稳定支持；Firefox 目前（v128）仍返回 NotSupportedError。别依赖它做核心交互动画。
- 检查是否存在：
typeof KeyframeEffect.prototype.setKeyframes === 'function' - 降级方案不是“模拟 setKeyframes”，而是重建动画：
anim.cancel(); new Animation(effect, timeline).play() - 注意：用
new KeyframeEffect()构造时若传入nulltarget，Safari 会直接报错，而 Chrome 允许——动态创建前务必确保 target 已挂载
