JavaScript动画核心是requestAnimationFrame，它按屏幕刷新率高效调度帧更新；需递归调用并设终止条件，配合缓动函数（如easeInOutQuad）实现自然运动效果。

JavaScript动画效果主要通过控制元素的样式属性随时间变化来实现，核心在于按帧更新元素状态并保持流畅视觉体验。现代开发中优先使用 requestAnimationFrame 替代 setTimeout 或 setInterval，因为它由浏览器调度，能自动匹配屏幕刷新率（通常60fps），更高效且省电。

用 requestAnimationFrame 实现基础动画

它告诉浏览器你希望执行动画，浏览器会在下一次重绘前调用指定函数。适合手动控制每一帧的位置、透明度、旋转等属性。

• 定义一个动画函数，内部修改元素样式（如 element.style.transform = `translateX(${x}px)`）
• 在函数末尾递归调用 requestAnimationFrame(animate)
• 添加终止条件（例如到达目标位置时停止调用）

缓动函数让动画更自然

直接线性变化（匀速）看起来生硬。引入缓动函数（easing function）可模拟加速、减速或弹性等物理效果。常见如 easeInOutQuad：

const easeInOutQuad = t => t
其中 t 是归一化时间（0 到 1），返回对应进度比例。将它乘以总位移量，就能得到当前帧的实际值。

封装可复用的动画工具函数

避免每次写重复逻辑，可封装一个简易 animate 函数：

• 接收目标元素、属性名（如 'left' 或 'opacity'）、起始值、结束值、持续时间（毫秒）和缓动函数
• 记录开始时间，每帧计算已过时间占比，再用缓动函数换算实际进度
• 支持 Promise 返回，方便链式调用或配合 async/await

与 CSS 动画协同使用更稳妥

纯 JS 动画灵活但易受主线程阻塞影响；CSS 动画（@keyframes + transition）由合成器线程处理，性能更好。推荐策略：

• 简单交互动画（悬停、点击反馈）优先用 CSS transition
• 复杂路径、动态参数或需要精确控制暂停/取消的场景用 JS 配合 transform 和 opacity
• 用 element.animate()（Web Animations API）作为折中方案，语法简洁且支持时间轴控制