JavaScript实现简单动画的几种方式：使用CSS过渡（Transition） 通过JavaScript动态修改元素的类，触发CSS中的transition属性，实现平滑的动画效果。element.classList.add('animate');.animate { transition: all 0.5s ease; transform: translateX(100px); }使

本文深入浅出地介绍了JavaScript实现简单动画的四种主流方式——CSS过渡（Transition）配合类名切换、requestAnimationFrame（浏览器原生推荐方案）、定时器（setInterval/setTimeout）逐帧控制，以及CSS关键帧动画（@keyframes）结合JavaScript触发，并系统梳理了操作样式的实用技巧：包括直接修改style属性、灵活使用classList管理预设动画类、通过getComputedStyle读取真实渲染值，以及利用CSS自定义变量实现动态主题与样式联动；核心思想是“简单动画交给CSS，动态逻辑交给JS”，强调性能、可维护性与语义化的平衡，让开发者用原生能力轻松打造流畅、轻量且易于扩展的交互效果。

JavaScript 实现简单动画，核心是**按时间间隔改变元素的 CSS 样式属性**；操作 CSS 样式则有直接修改 style、用 className 切换预设类、或调用 getComputedStyle 读取计算值等方法。下面分两块讲清楚、够实用。

用 JavaScript 做基础动画的几种方式

不依赖框架，原生 JS 就能做出平滑移动、缩放、淡入淡出等效果：

• 定时器 + style 修改（适合入门理解）：用 setInterval 或 setTimeout 逐帧更新 element.style.left、style.opacity 等。注意单位要加（如 "10px"），且初始样式最好用内联或提前设置好，否则可能读不到起始值。
• requestAnimationFrame（推荐）：比定时器更高效、更顺滑。浏览器会在下一次重绘前执行回调，自动适配刷新率。写法类似递归：function animate() { /* 更新样式 */; requestAnimationFrame(animate); }，记得加结束条件避免无限循环。
• CSS 过渡 + JS 触发（最轻量）：把动画逻辑交给 CSS（比如 transition: transform 0.3s ease;），JS 只负责添加/移除 class 或修改 style.transform。这样性能好、代码少，适合位移、旋转、透明度变化等常见动效。

JavaScript 操作 CSS 样式的常用方法

改样式不是只有 element.style.xxx = "xxx" 这一种，不同场景用不同方式：

• 直接改 style 属性：适用于动态、一次性、需计算的样式，比如 box.style.width = (w * 0.8) + "px"。注意 CSS 属性名转驼峰（background-color → backgroundColor，font-size → fontSize）。
• 切换 className 或 classList：推荐用于有固定样式的场景。比如 box.classList.add("active")、box.classList.toggle("hidden")。语义清晰，便于维护，也方便用 CSS 控制动画时长和缓动函数。
• 读取计算后的样式：用 getComputedStyle(element) 获取最终生效的样式（含继承、媒体查询结果等）。例如 getComputedStyle(box).height 返回带单位的字符串 "200px"，适合做动画起始值判断或响应式逻辑。
• 修改 CSS 自定义属性（CSS 变量）：通过 element.style.setProperty("--main-color", "#ff6b35") 动态更新，再在 CSS 中用 color: var(--main-color); 引用。适合主题切换、全局风格控制。

基本上就这些。动画不必追求复杂，关键是选对方法：简单交还给 CSS，动态逻辑交给 JS，配合 requestAnimationFrame 或 classList，就能写出干净又流畅的效果。

终于介绍完啦！小伙伴们，这篇关于《JavaScript实现简单动画的几种方式：使用CSS过渡（Transition） 通过JavaScript动态修改元素的类，触发CSS中的transition属性，实现平滑的动画效果。element.classList.add('animate');.animate { transition: all 0.5s ease; transform: translateX(100px); }使用requestAnimationFrame 适用于需要精确控制帧率的动画，常用于游戏或复杂动画。function animate() { // 动画逻辑 requestAnimationFrame(animate); } animate();使用setInterval或setTimeout 通过定时器逐步改变元素样式，实现动画效果。let pos = 0; function move() { pos++; element.style.left = pos + 'px'; if (pos