CSS动画适合简单、声明式、性能敏感的动画，如悬停淡入、卡片翻转；rAF适合需动态控制、物理模拟、实时交互的复杂动画，如拖拽跟随、弹簧效果、数据驱动变化。
JavaScript 动画和 CSS 动画各有适用场景，没有绝对“谁更好”，关键看需求：简单、声明式、性能敏感的动画优先用 CSS；需要动态控制、复杂逻辑、逐帧干预的动画用 requestAnimationFrame（简称 rAF）。
CSS 动画更适合这些情况
CSS 动画（@keyframes + animation）由浏览器渲染引擎直接驱动，通常运行在合成线程（compositor thread），不阻塞主线程，性能高、功耗低，尤其适合位移、缩放、旋转、透明度等可被硬件加速的属性。
- 按钮悬停淡入、卡片翻转、加载指示器旋转——写几行 CSS 就能完成，代码简洁、易维护
- 动画触发条件明确（如 class 切换），且无需运行时计算中间状态
- 需要兼容性保障（现代浏览器对
transform和opacity的 CSS 动画优化非常成熟）
requestAnimationFrame 更适合这些情况
requestAnimationFrame 让你完全掌控每一帧的渲染逻辑，适合需要实时响应、物理模拟、手绘路径、数据驱动或与用户交互深度耦合的动画。
- 拖拽过程中跟随鼠标平滑移动元素（需监听
mousemove并每帧更新位置） - 实现弹簧动画（如 React 的
react-spring）、粒子系统、Canvas 游戏动画 - 动画参数随时间/数据动态变化，比如图表数值渐变、滚动视差、自定义缓动曲线
- 需要精确控制暂停、回放、跳转到某一帧，或与其他 JS 逻辑（如 API 响应、状态判断）同步
别混用，也别硬替——注意关键限制
CSS 动画无法直接读取运行时 DOM 值（比如实时 scrollTop），rAF 可以但要自己管理状态和性能。另外：
shopify-app-react-router
下载
构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G
立即学习“Java免费学习笔记（深入）”；
- CSS 动画修改
left/top等会触发重排（layout），务必用transform替代 - rAF 不自动节流，忘记取消会导致内存泄漏；要用
cancelAnimationFrame清理 - 不要在 rAF 回调里频繁操作样式（如反复改
element.style.left），应聚合变更或用transform批量更新 - 想兼顾两者优势？可用 CSS 动画做主效果，用 rAF 监听
animationstart/animationend做联动逻辑
小技巧：快速判断该选谁
问自己三个问题：
- 这个动画是否只依赖固定起点和终点，且行为确定？→ 优先 CSS
- 是否需要在动画中根据鼠标、滚动、数据实时调整目标或速度？→ 选 rAF
- 是否涉及 Canvas、WebGL、SVG 路径或非标准 DOM 属性？→ rAF 是唯一选择
不复杂但容易忽略：多数 UI 动效（如展开收起、淡入淡出、路由切换）用 CSS 更稳；真正需要“动起来还聪明”的地方，才轮到 JavaScript 上场。
