"动画性能选择：Web Animations API 与 CSS 的取舍"

概述CSS 动画/过渡语法简洁、性能稳定，适合多数场景；Web Animations API 提供更强控制力（时间线、播放控制、合成）与编程接口，适合复杂动效与交互驱动动画。能力与差异CSS：声明式、浏览器可优化与合成，配合 `transform/opacity` 减少重排与重绘；受限于触发与控制力［参考1］。Web Animations API：`element.animate(keyframes, options)` 提供关键帧、时间线、播放控制与组合；可与脚本逻辑深度融合［参考2,3］。性能建议优先使用 `transform/opacity` 动画；避免布局属性动画。控制层：在复杂动效下使用 Web Animations API 获取暂停/继续/反转控制；在简单场景保留 CSS，以减少运行时开销。工程实践为交互驱动动画（拖拽、滚动联动）使用脚本 API；为装饰性动效使用 CSS 过渡与关键帧。监测与调试：使用 DevTools Performance/Rendering 面板观察合成与重绘。参考与验证［参考1］MDN 中文：CSS 动画与过渡概览与性能建议：https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation 与 https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition［参考2］MDN 中文：Web Animations API `Element.animate()` 与控制接口：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/animate［参考3］web.dev：动画性能与合成层建议（`transform/opacity`）：https://web.dev/articles/animations-guide关键词校验关键词与动画性能与取舍一致。