17370845950

使用 transform: translate() 实现位移动画最流畅，因其不触发重排且由 GPU 加速；应避免 left/top/margin 等几何属性；合理设置时长（0.2s–0.4s）与缓动函数，并用 CSS 自定义属性或 class 控制动画。

用 keyframes 配合 transform: translate() 是实现平滑位移动画最可靠的方式，比直接修改 left、top 或 margin 流畅得多——因为后者会触发重排（layout），而 transform 仅影响合成层，由 GPU 加速。

优先使用 transform 而非几何属性

浏览器对 transform 和 opacity 的动画做了深度优化，能走「合成器线程」，不阻塞主线程。而修改 width、height、left、top 等会强制触发 layout + paint，帧率容易掉。

• ✅ 推荐：transform: translateX(100px)、translateY(-20px)、translate3d(0, 0, 0)
• ❌ 避免：left: 100px、margin-left: 100px、top: 20px

启用硬件加速（谨慎使用）

加 transform: translateZ(0) 或 translate3d(0, 0, 0) 可强制创建独立的合成层，让动画更稳定。但别滥用——过多合成层会增加内存开销，反而拖慢性能。

• 适合：单个或少量频繁动画的元素（如轮播图项、悬浮按钮）
• 慎用：列表项批量动画、大量卡片同时位移
• 可配合 will-change: transform 提前提示浏览器（仅在动画开始前设置，结束后移除）

动画时长与缓动要合理

太短（如 0.1s）人眼难感知，易显“卡”；太长（如 2s）又显得迟滞。标准交互位移建议 0.2s–0.4s，搭配自然缓动函数：

• ✅ ease-out（进出场常用）
• ✅ cubic-bezier(0.34, 1.56, 0.64, 1)（稍带弹性，更生动）
• ❌ 避免 linear（机械感强，易显生硬）

确保动画触发不依赖 JS 频繁写样式

如果靠 JS 循环改 style.left 实现“移动”，必然卡顿。正确做法是：

• 用 class 控制动画启停（如 .is-moving），CSS 内定义 @keyframes
• 需要动态距离？用 CSS 自定义属性传参：element.style.setProperty('--tx', '120px')，然后在 keyframes 中用 translateX(var(--tx))（需现代浏览器支持）
• 避免在 scroll、resize 中直接触发动画，加节流或用 IntersectionObserver 替代

不复杂但容易忽略：流畅位移的关键不在“怎么动”，而在“让浏览器少做什么”。删掉重排、交出控制权给合成器，动画自然就跟上了。