JavaScript动画与CSS动画怎么用

本文深入解析了JavaScript与CSS动画的协同机制与最佳实践，阐明二者并非竞争关系而是各司其职：CSS通过@keyframes高效定义平滑、硬件加速的视觉变化，而JavaScript则专注触发时机、交互响应、流程控制（如暂停/反转）及动态逻辑处理；文章不仅对比了requestAnimationFrame与setTimeout的性能差异，还提供了手动实现动画、CSS类控制、自定义属性传参、Web Animations API等实用方案，并强调避免属性冲突、精准获取动画状态等关键技巧，帮助开发者根据场景——简单预设选CSS、复杂动态逻辑选JS——做出明智选择，真正实现高性能、高可控性的现代网页动画。

JavaScript 实现动画效果，核心是控制元素的样式属性随时间变化；与 CSS 动画结合使用时，JS 主要负责触发、控制流程（如开始、暂停、反转）和响应交互，而 CSS 负责定义平滑、高性能的视觉变化。

用 JavaScript 手动实现基础动画

通过 requestAnimationFrame 定时更新样式，比 setTimeout 更高效、更契合浏览器渲染节奏：

• 获取目标元素，比如 const box = document.getElementById('box');
• 设定起始值、目标值、持续帧数（或时间）
• 在每一帧中按比例计算当前值，赋给 element.style.transform 或 opacity 等可动画属性
• 用 requestAnimationFrame 循环调用，直到完成

例如：让一个 div 水平移动 200px，耗时 60 帧：

let start = null;
const duration = 60;
const startPos = 0;
const endPos = 200;
function animate(timestamp) {
if (!start) start = timestamp;
const progress = Math.min((timestamp - start) / (1000 / 60  duration), 1);
const currentPos = startPos + (endPos - startPos)  progress;
box.style.transform = translateX(${currentPos}px);
if (progress < 1) requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

用 CSS @keyframes 定义动画，JS 控制播放

CSS 动画写在样式表中，JS 仅通过增删 class 或修改 animation-play-state 来干预：

• 先在 CSS 中定义：
  @keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
  再给元素设置：
  .slide { animation: slideIn 0.4s ease-out; }
• JS 触发：只需 box.classList.add('slide');
• 暂停/恢复：用 box.style.animationPlayState = 'paused' 或 'running'
• 监听结束：绑定 animationend 事件，做后续处理

JS 与 CSS 动画协作的关键技巧

避免冲突、提升可控性：

• 动画期间禁用 JS 直接修改同名属性（如 CSS 正在用 transform 动画，JS 就别同时设 style.transform，否则会打断）
• 用 getComputedStyle(el).transform 获取当前 CSS 动画中的实时值（注意返回矩阵字符串，需解析）
• 需要动态参数？可用 CSS 自定义属性（--offset: 200px），JS 修改 style.setProperty('--offset', '300px')，CSS 中用 transform: translateX(var(--offset));
• 复杂序列动画推荐用 Web Animations API（el.animate(keyframes, options)），它融合了 JS 控制力和 CSS 渲染性能

何时选 JS 动画，何时选 CSS 动画？

简单、预设、纯视觉变化（淡入、滑动、旋转）→ 优先用 CSS 动画，节省主线程、硬件加速、代码清晰；
需要运行时计算、用户拖拽跟随、物理模拟（如缓动曲线依赖速度）、条件分支或与其他逻辑强耦合 → 用 JS（配合 requestAnimationFrame 或 Web Animations API）。

两者不是互斥，而是分工：CSS 负责“怎么动”，JS 负责“什么时候动、为什么动、动多少”。

今天关于《JavaScript动画与CSS动画怎么用》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！