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