CSS动画可完全替代脚本动画仅限声明式动效，如按钮悬停、卡片入场等；而用户交互、物理效果、数据驱动链式动画必须用JS实现。
能代替，但只在动画逻辑简单、无需实时响应或状态计算的场景下——用对了是提效，用错了反而增加维护成本和性能风险。
哪些脚本动画可被 CSS 完全替代
CSS 动画适合“声明式”动效：起点和终点明确、过程固定、不依赖用户输入或数据变化。这类动画交给 CSS，浏览器会自动走合成层（compositor），不占主线程，帧率更稳。
- 按钮悬停变色+缩放：用 transition 配合
:hover，写transform: scale(1.05); opacity: 0.9;即可 - 卡片入场（从下往上滑入+淡入）：用 @keyframes 定义
0% { transform: translateY(20px); opacity: 0; }→100% { transform: translateY(0); opacity: 1; }，JS 只需加类触发 - 加载旋转图标、徽章数字跳动、气泡提示弹出缩放：全部可用 animation 独立实现，无需 JS 控制每一帧
必须保留脚本动画的三类硬需求
CSS 是静态描述，没有变量、条件判断和实时读取能力。一旦涉及以下任一情况，就得用 JS（配合 requestAnimationFrame 或 GSAP 等库）：
- 用户拖拽过程中元素实时跟随鼠标位置（
transform: translate(x, y)每帧更新） - 物理效果：弹性回弹、重力下落、碰撞反馈——需要每帧计算速度、加速度、边界检测
- 数据驱动链式动画：比如 API 返回 7 条列表项，要求逐个延迟 0.1s 入场；且用户中途点击“刷新”，需立即中断并重置所有动画状态
替代的关键不在“写法”，而在“分工策略”
真正提升性能的不是“全换 CSS”，而是让 JS 做决策、CSS 做执行：
立即学习“前端免费学习笔记（深入）”；
- 用 Intersection Observer 替代
scroll事件监听，元素进入视口时 JS 添加is-visible类，CSS 负责动效细节 - Vue/React 中，把动画类名绑定到响应式状态（如
:class="{ 'animate-in': isVisible }"），组件控制时机，CSS 控制表现 - 动画中只改 transform 和 opacity —— 这两个属性天然触发 GPU 合成，不会引发重排或重绘；避免用
top/left/width/height等触发布局的属性
别忽略的性能细节
即使全用 CSS，写法不当一样卡顿：
- 禁用
transition: all 0.3s：它可能意外触发 layout（比如某次 class 切换改了 margin），应显式列出要过渡的属性，如transition: transform 0.25s, opacity 0.3s -
will-change: transform, opacity只加在真正频繁动画的元素上（如模态框、导航浮层），动画结束后建议移除，避免长期占用合成层资源 - 避免深层嵌套动画元素：DOM 层级越深，合成操作开销越高；把动效节点尽量提到较浅层级
