动画别按帧加位移用时间进度并尊重减少动效设置requestAnimationFrame每帧增加固定像素会让速度随刷新率改变。用时间戳计算进度并为减少动效偏好准备不依赖大位移的反馈。用时间计算进度浏览器会把时间戳传给 rAF。使用开始时间和总时长计算进度60Hz 或更高刷新率下都能保持相近的动画时长切回前台时可限制单帧变化避免状态突然跳太远。function animate(element, duration 300) { const start performance.now(); function frame(now) { const progress Math.min((now - start) / duration, 1); element.style.transform translateX(${progress * 100}px); if (progress 1) requestAnimationFrame(frame); } requestAnimationFrame(frame); }实际项目中还应保存 rAF ID并在组件卸载时取消它。尊重减少动效偏好prefers-reduced-motion不是在所有地方把动画归零。对于会造成位移或晕动感的转场可直接显示最终状态对于必要的状态反馈改为短暂的颜色或透明度变化。media (prefers-reduced-motion: reduce) { .panel { transition: opacity 120ms linear; transform: none; } }部署前检查在常见刷新率和键盘操作下观察一次确认没有用top、left等布局属性做高频动画检查焦点状态和可取消性。动效是页面的呼吸不该让任何人为了它失去控制感。