网页动效不卡顿的关键在于控节奏、避重排、选对属性（如transform/opacity）、分清层级；需匹配交互意图设置时长与缓动，多元素错峰动画，并用requestAnimationFrame驱动，避免强制同步布局。
网页动效告别卡顿，关键不在“加效果”，而在“控节奏、避重排、选对属性、分清层级”。卡顿不是动效的原罪，错误的实现方式才是根源——比如用 left 移动按钮，或在滚动中频繁读取 offsetTop，这些操作会直接拖垮主线程。真正有效的优化，是从设计意图出发，贯穿技术选型、属性选择、渲染机制理解到性能验证的完整闭环。
只动画能 GPU 加速的属性
浏览器对不同 CSS 属性的处理路径差异极大。修改 width、height、top、margin 会触发重排（reflow），代价极高；而 transform 和 opacity 只走合成（composite）阶段，由 GPU 独立处理，不阻塞主线程。
- 位移统一用
transform: translateX/Y/Z()，别碰left/right - 缩放/旋转用
transform: scale()或rotate()，而非修改width+height - 渐隐渐显只用
opacity，避免同时改visibility+height等组合 - 必要时加
will-change: transform, opacity提前提示浏览器创建独立合成层（但勿滥用）
动效时长与缓动必须匹配交互意图
动效不是越快越好，也不是越慢越高级，而是要和用户心理预期对齐。错位的节奏比不动更伤体验。
- 按钮悬停、开关切换等即时反馈类动效：控制在 100–250ms，用
cubic-bezier(0.4, 0.2, 0.2, 1)这类稍快的 ease-out 曲线 - 页面级转场（如路由跳转、模态框展开）：300–500ms 更自然，可用带轻微回弹的缓动增强“落地感”
- 加载占位或引导类动效：可延长至 600ms–1s，给用户明确等待预期，避免“卡住”错觉
- 禁用
linear匀速运动——它违背物理惯性，人眼极易识别为机械、廉价
多元素动效要有错峰与层级关系
多个元素同步起止，看起来像“集体抽搐”。真实世界的变化从来不是齐刷刷的，动效需要模拟这种有机节奏。
- 卡片展开时：标题先动（0ms 起始），内容延迟 15ms，阴影/边框再延后 10ms
- 列表项删除：被删项淡出收缩，其余项向上移动时加入 30ms 渐进位移，而非瞬间“唰”地补位
- 使用
transition-delay或 JS 中 stagger（错峰）逻辑，让运动形成视觉引导流 - 避免所有元素共用同一缓动函数和时长——差异化才是真实感的来源
JS 动画必须绑定 requestAnimationFrame
用 setTimeout 或 setInterval 驱动动画，极易脱离屏幕刷新节奏，造成掉帧。requestAnimationFrame（rAF）是唯一能与 60Hz 渲染周期对齐的机制。
- 所有逐帧计算（如滚动视差、自定义路径动画）必须封装在 rAF 回调中
- rAF 回调内避免触发同步布局：不读
offsetTop、getBoundingClientRect()、computedStyle等强制回流 API - 如需读取布局信息，用
ResizeObserver或IntersectionObserver替代手动轮询 - 复杂计算任务（如粒子系统物理运算）移交 Web Worker，防止阻塞渲染主线程
