JavaScript动画通过定时更新样式属性实现，推荐requestAnimationFrame或Web Animations API；CSS动画由渲染引擎驱动，性能更优但灵活性差；应按场景选择并兼顾可访问性。
JavaScript 实现动画效果，核心是通过定时更新元素的样式属性（比如 left、transform、opacity），再配合重绘/重排机制让变化呈现为连续运动。而 CSS 动画由浏览器渲染引擎直接驱动，声明式定义起止状态和时间曲线，性能通常更优、代码更简洁。
JavaScript 动画的常见实现方式
主流有三种：手动控制 setTimeout/setInterval、使用 requestAnimationFrame（推荐）、或借助 Web Animations API。
- requestAnimationFrame：浏览器在下一次重绘前调用回调，帧率与屏幕刷新率同步（通常 60fps），避免丢帧和卡顿。适合自定义逻辑强的动画，比如跟随鼠标、物理模拟、逐帧控制。
-
Web Animations API（
element.animate()）：原生 JS 接口，支持关键帧、时序控制、暂停/播放/反向等，比 CSS 更灵活，且可动态生成动画参数。 -
避免直接操作 offsetLeft / scrollTop 等触发布局计算的属性，优先用
transform和opacity，它们只触发合成（composite），不引发重排（reflow）和重绘（repaint），性能更好。
CSS 动画的核心特点
CSS 动画（@keyframes + animation）或过渡（transition）由浏览器在独立线程中处理，对主线程压力小，启动快、运行稳，特别适合状态切换类动效。
- 声明式写法：只需定义“从哪来、到哪去、怎么变”，浏览器自动插值计算中间帧，无需手写循环逻辑。
-
硬件加速友好：当使用
transform和opacity时，浏览器会自动启用 GPU 合成层，动画更流畅。 - 局限性明显：无法响应运行时数据（如滚动位置、用户输入实时反馈），也不能精确控制每一帧，复杂交互逻辑难实现。
选 JavaScript 还是 CSS？关键看需求
不是非此即彼，而是按场景分工协作：
立即学习“Java免费学习笔记（深入）”；
- 做按钮悬停、模态框淡入、菜单展开收起 → 用
transition或@keyframes，简单高效。 - 做滚动视差、拖拽跟随、粒子效果、游戏逻辑 → 必须用 JavaScript，配合
requestAnimationFrame或 WAAPI。 - 想兼顾性能与灵活性？可先用 CSS 做基础动效，再用 JS 监听动画事件（如
animationend或finish）触发后续行为。
一个小提醒：别忽视动画的可访问性
用户可能开启了“减少运动”偏好（prefers-reduced-motion）。JS 动画可通过 window.matchMedia('(prefers-reduced-motion: reduce)') 检测并降级；CSS 则可用 @media (prefers-reduced-motion: reduce) 直接禁用或替换为简单过渡。
