transform: translate()比top/left更顺滑，因其仅触发GPU合成层、跳过Layout和Paint；而后者强制每帧重排重绘，导致卡顿。
transform: translate() 配合 transition 或 @keyframes，别碰 left、top、margin —— 这些会触发重排，动画一卡一卡的。
为什么 translate() 比 left/top 更顺？
浏览器渲染分三步：布局（layout）→ 绘制（paint）→ 合成（composite）。left 和 top 改变后，浏览器必须重新计算整个页面布局（reflow），而 translate() 只在合成层操作，走 GPU 加速，跳过前两步。
- 移动端尤其明显：用
left滚动菜单，手指一松就掉帧；换成translateX()，60fps 基本稳住 - 如果元素本身是
position: absolute或fixed，再改left也还是重排 —— 不是“定位了就安全”，关键看改的是哪个属性 -
will-change: transform可提前提示浏览器准备合成层，但只对频繁动画的元素加，滥用反而吃内存
transition 实现交互式滑动（比如 hover 或 toggle）
适合按钮悬停位移、侧边栏展开、卡片浮入这类由用户动作触发的单次或条件性移动。
- 必须给元素设定位（
position: relative/absolute/fixed），否则translate()仍生效，但语义和后续控制容易乱 -
transition要明确写作用属性：transition: transform 0.3s ease-out，别写transition: all 0.3s—— 万一其他属性意外变化，会拖慢动画 - 示例：悬停向右滑 20px
.slide-btn {
position: relative;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.slide-btn:hover {
transform: translateX(20px);
}
注意：这里用了自定义贝塞尔曲线，比默认 ease 更有“弹出感”，cubic-bezier(0.34, 1.56, 0.64, 1) 是常见入场动画节奏。
@keyframes 实现自动循环滑动（比如轮播、进度条）
适合不需要用户干预、按时间自动运行的动画，比如 banner 切换、加载指示器、无限滚动字幕。
立即学习“前端免费学习笔记（深入）”；
-
@keyframes里只写transform值，别混width、opacity以外的布局属性 —— 一旦掺杂height或left，整个动画可能降级回主线程渲染 - 无缝循环的关键是起止位置匹配：比如从
translateX(-100%)到translateX(0)，再接一个完全一样的帧回到translateX(-100%)，否则会“抽搐” - 父容器务必加
overflow: hidden，否则平移过程中的溢出内容会露出来
@keyframes slideLoop {
0% { transform: translateX(0); }
100% { transform: translateX(-200px); }
}
.slider-item {
animation: slideLoop 4s linear infinite;
}
容易被忽略的兼容性和细节
不是所有“平滑”都真平滑。几个实际踩坑点：
- 旧版 Safari（iOS 12 及更早）对
translateZ(0)或translate3d(0,0,0)更友好，必要时可 fallback：transform: translateX(20px) translateZ(0) - Flex 容器里子元素用
transform动画，父容器别同时开flex-wrap: wrap并频繁改变尺寸，否则可能触发 layout → paint → composite 全流程 - JavaScript 控制动画时，别在动画中反复读取
offsetLeft或getBoundingClientRect()—— 这会强制同步触发重排，直接卡死动画
真正影响流畅度的，往往不是动画写得多炫，而是有没有让浏览器“放心地只跑合成层”。
