用requestAnimationFrame替代setTimeout可实现平滑动画，因其由浏览器统一调度绘制时机；需在回调末尾递归调用自身，避免耗时操作，并可用performance.now()控制时间差。
用 requestAnimationFrame 替代 setTimeout 实现平滑动画
直接用 setTimeout 控制样式变化容易掉帧，尤其在页面负载高时。浏览器无法协调绘制时机，导致卡顿或跳变。requestAnimationFrame 会把动画逻辑交给浏览器统一调度，保证每帧在下一次重绘前执行，是 Web 动画的底层推荐方式。
- 必须在回调函数末尾再次调用
requestAnimationFrame才能持续执行 - 不要在回调里做耗时操作（如 DOM 查询、大量计算），否则会挤占渲染时间
- 可配合
performance.now()做时间差控制，实现精确的缓动逻辑
let startTime = null;
function animate(timestamp) {
if (!startTime) startTime = timestamp;
const elapsed = timestamp - startTime;
const progress = Math.min(elapsed / 1000, 1); // 持续1秒
element.style.transform = `translateX(${progress * 200}px)`;
if (progress < 1) requestAnimationFrame(animate);
}
requestAnimationFrame(animate);用 transition CSS 属性做声明式位移动画
对简单位移、缩放、透明度变化，纯 CSS 更轻量、更稳定，且支持硬件加速。关键不是写动画本身，而是控制触发时机和过渡参数。
- 必须提前在 CSS 中定义
transition，仅靠 JS 改变style不会生效 - 避免同时过渡多个属性（如
left+top+opacity），优先用transform和opacity - 过渡时间单位用
ms更易控制，例如transition: transform 300ms ease-out
/* CSS */
.box { transition: transform 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.box.active { transform: translateX(100px); }
/ JS /
element.classList.add('active');
用 animate() API 实现可控的关键帧动画
Element.animate() 是现代浏览器原生支持的 JavaScript 动画接口，比手动管理 requestAnimationFrame 更简洁，且自带播放控制能力（暂停、反向、时间偏移）。
S-CMS企业建站系统(含APP/小程序)5.0 build20230614
下载
闪灵CMS企业建站系统是淄博闪灵网络科技有限公司开发的一款专门为企业建站提供解决方案的产品，前端模板样式主打HTML5模板，以动画效果好、页面流畅、响应式布局为特色，程序主体采用PHP+MYSQL构架，拥有独立自主开发的一整套函数、标签系统，具有极强的可扩展性，设计师可以非常简单的开发出漂亮实用的模板。系统自2015年发布第一个版本以来，至今已积累上万用户群，为上万企业提供最优质的建站方案。
- 不兼容 IE，Safari 16.4+ 才支持
iterationStart等高级参数 - 动画结束后默认不保留最终状态，需显式设置
fill: 'forwards' - 传入的 keyframes 对象中，
offset值必须在 0–1 之间，且有序
element.animate(
[
{ transform: 'scale(1)', opacity: 1 },
{ transform: 'scale(1.2)', opacity: 0.7 }
],
{
duration: 400,
fill: 'forwards',
easing: 'ease-in-out'
}
);
为什么 left/top 动画性能差？
修改 left 或 top 会触发浏览器强制同步布局（layout），每次重排都要重新计算整个文档流，代价远高于只改 transform（只影响合成层）。
- 即使元素已设
position: absolute，left变化仍会引发 layout -
transform: translateX()不影响文档流，且大多数情况下走 GPU 合成，帧率更稳 - 检查工具：Chrome DevTools 的 Rendering 面板打开 “Paint flashing” 和 “FPS meter”，对比两种写法的闪烁区域和帧率波动
复杂动画真正难的不是“怎么动起来”，而是“怎么动得准、停得稳、不抢主线程”。比如缓动函数选错、未清理旧动画句柄、CSS 触发重排却不自知——这些细节比写第一行 requestAnimationFrame 更容易让效果失真。
