"Web Animations API：可合成动效与关键帧实践"

概述Web Animations API（WAAPI）以编程方式驱动关键帧动画，适合交互动效与视图过渡。对 `transform/opacity` 等属性，浏览器可在合成层执行，性能优于主线程布局/绘制。示例const el = document.querySelector('.box') const anim = el.animate([ { transform: 'translateY(0)', opacity: 1 }, { transform: 'translateY(20px)', opacity: 0.8 } ], { duration: 300, fill: 'both', easing: 'ease-out', composite: 'replace' }) anim.onfinish = () => { /* 状态切换或清理 */ } 工程建议可合成属性：优先使用 `transform/opacity`；避免触发布局的属性（如 `width`）。控制与同步：使用 `play/pause/reverse` 管理状态；与视图过渡/滚动驱动协作。回退策略：不支持时回退到 CSS 动画或过渡；保持动效一致性。参考与验证MDN Web Animations API 文档：https://developer.mozilla.org/docs/Web/API/Web_Animations_APIweb.dev 动画性能指南：https://web.dev/articles/animations-and-performanceW3C 相关说明与讨论：https://www.w3.org/TR/web-animations-1/