要让网页动效真正“丝滑”，关键在于守住不触发重排、帧率稳60fps、节奏贴合用户预期三条硬线；优先使用transform和opacity等GPU加速属性，控制每帧≤16.67ms，避免布局抖动，并适配减少动画偏好与设备性能。
要让网页动效真正“丝滑”，关键不是堆参数，而是守住三条硬线：不触发重排、帧率稳在60fps、动效节奏贴合用户预期。这三者缺一不可，否则再炫的动画也容易卡顿、失真或让人不适。
只用能走GPU合成的属性
浏览器对 transform（位移/缩放/旋转）和 opacity 的处理最轻量——它们不改布局、不触重绘，直接交由GPU合成层渲染。这是性能底线。
- ✅ 推荐写法：
transform: translateX(100px) scale(1.05); opacity: 0.9; - ❌ 避免写法：
left: 100px; width: 200px; background: #ff0000;（这些会强制重排或重绘） - 可加
will-change: transform;提前提示浏览器升层，但别滥用，仅用于明确要动的元素
把动画控制在16.67ms内完成每帧
60fps = 每帧≤16.67ms。一旦JS逻辑、样式计算或布局计算挤占过多时间，帧就会掉。重点盯住主线程负载。
- 用 Chrome DevTools 的 Performance 面板录制动画，看“Main”轨道是否持续平稳，有无长任务阻塞
- 避免在动画中读写 layout 属性（如
offsetTop、getBoundingClientRect()），防止布局抖动 - 复杂交互动画优先用 Web Animation API 或 requestAnimationFrame，比 CSS transition 更可控
动效节奏必须符合人眼感知规律
流畅不只是“快”，更是“自然”。用户对加速度、停顿、方向变化有本能预期，违背它，再准的60fps也会显得生硬。
- 入场动效多用缓入缓出（如
cubic-bezier(0.25, 0.46, 0.45, 0.94)），模拟物体启动与停止的惯性 - 退出动效可带轻微回弹（如
cubic-bezier(0.6, 0.05, 0.28, 0.69)），增强反馈感 - 同一页面中，同类操作（如按钮点击、卡片展开）应保持一致时长（建议 200–400ms），避免节奏混乱
主动适配设备与用户偏好
不是所有用户都需要满屏动画。忽略硬件差异和可访问性需求，本身就是体验断层。
- 用
@media (prefers-reduced-motion: reduce)全局降级：关闭非必要动效，保留关键反馈（如表单提交成功态） - 对低端设备或弱网环境，可 JS 检测
matchMedia('(max-width: 768px)').matches && navigator.hardwareConcurrency ，自动简化动效层级 - Lottie 等资源做预加载或懒加载，避免首屏卡顿
