优先使用CSS3动画，因其由合成器线程处理、不占主线程、自动硬件加速且浏览器可智能暂停不可见动画；JS动画虽灵活但易拖慢页面，适合复杂交互场景，二者应按需协作。
能用 CSS3 实现的动画，优先交给 CSS3，这不是“偷懒”，而是利用浏览器底层机制做更高效的事。JavaScript 动画灵活但容易拖慢页面，尤其在移动端；CSS3 动画由合成器线程处理，不占主线程、自动硬件加速、浏览器还能智能暂停不可见区域的动画。
CSS3 替代 JS 动画的关键替换点
不是所有 JS 动画都能直接“删掉换 CSS”，重点是识别并替换那些本就适合声明式控制的动效：
-
位移类：把
element.style.left/top或margin-left/margin-top改成transform: translateX()/translateY() -
缩放/旋转：用
transform: scale(1.2)或rotate(45deg)，别再用 JS 算宽高或 rotate 角度后反复赋值 -
淡入淡出：改用
opacity: 0 → 1配合transition，避免 JS 每帧修改透明度 -
状态切换动画（如 hover、focus、展开收起）：直接用
transition+ class 切换，无需 JS 启动/监听动画帧
必须配合的性能细节
只换属性还不够，得让浏览器真正启用合成层：
- 确保只用 transform 和 opacity 这两类属性——它们不会触发重排（layout）和重绘（paint），只走合成（composite）流程
- 对频繁动画的元素加
will-change: transform（慎用，仅对持续动画元素），提示浏览器提前创建独立图层 - 避免在
transition或@keyframes中写width、height、top、left、margin等会强制重排的属性 - 用 Chrome DevTools 的 Performance 面板录一段动画，看 Timeline 是否以绿色条（Compositor）为主，而非紫色（Layout）或黄色（Paint）
JS 不能撤退的场景，怎么协作
不是所有动画都适合纯 CSS。当需要滚动联动、手势拖拽、物理模拟或条件分支时，JS 仍是主力。这时可混合使用：
立即学习“Java免费学习笔记（深入）”；
- 用 JS 监听滚动/触摸，动态设置一个 CSS 自定义属性（
style.setProperty('--scroll-y', y)），再让 CSS@keyframes或transition响应它 - 用 JS 控制动画的播放/暂停/时间轴（如
el.animate(...).pause()），底层仍由 CSS 渲染 - 复杂交互动画（比如菜单逐项飞入）用 CSS keyframes + JS 控制 class 添加时机，而不是每帧手动改 style
兼容性与落地建议
现代项目基本可放心用，只需注意两点：
- IE10+、Edge 12+、Chrome 36+、Firefox 16+、Safari 9+ 均原生支持
transform和transition；移动端 iOS Safari / Android Chrome 全面支持 - 用 Autoprefixer 自动补全前缀，不必手写
-webkit-；关键帧动画名不用加前缀，现代构建工具已处理 - 简单过渡动画写
transition，多步序列动画写@keyframes+animation，避免用 JS 模拟 timeline
