JavaScript实现动画的核心是按时间间隔改变元素CSS样式属性；常用方式包括定时器+style修改、requestAnimationFrame（推荐）和CSS过渡+JS触发；操作样式还可通过className切换、getComputedStyle读取及CSS变量动态更新。
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，就能写出干净又流畅的效果。
立即学习“Java免费学习笔记（深入）”；
