用 transform: translate() 做滑动动画比 left/top 更高效，因其只触发合成层渲染、支持 gpu 加速，避免重排；应配合 will-change、明确父容器尺寸及纯 transform 的 @keyframes 使用。
用 transform: translate() 做滑动动画比 left/top 更高效
直接改 left 或 top 会触发浏览器重排（reflow），而 transform: translate() 只走合成层（compositor），GPU 加速，动画更顺。尤其在移动端或复杂页面里，这点差异非常明显。
实操建议：
- 始终用
transform: translateX()/translateY()控制水平/垂直滑动，避免用left、right、margin等触发布局的属性 - 给动画元素加
will-change: transform（仅在必要时），提示浏览器提前准备合成层；但别滥用，可能增加内存开销 - 确保父容器有明确宽高或
overflow: hidden，否则滑出区域的内容可能意外可见
@keyframes 中只写 transform 值，不混用其他属性
动画帧里混写 opacity 和 transform 通常没问题，但一旦加入 width、height、background-color 等非合成属性，就可能降级回主线程渲染，失去性能优势。
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
@keyframes slideInRight {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
错误写法（应避免）：
@keyframes badSlide {
from { transform: translateX(100%); width: 0; }
to { transform: translateX(0); width: 200px; }
}
用 animation-timing-function 控制滑动节奏，别只依赖 ease
默认的 ease 是先慢后快再慢，适合模拟自然惯性，但很多滑动场景需要更明确的起停感——比如菜单弹出要“刹得住”，轮播图切换要“匀速过渡”。
常见选择与效果：
-
ease-out：适合“滑入完成时减速”，如侧边栏展开结束前缓一下 -
cubic-bezier(0.25, 0.46, 0.45, 0.94)：常用流畅弹跳曲线，比原生ease-in-out更轻快 -
steps(1, end)：强制逐帧跳变，适合模拟打字机、进度条分段滑动等离散效果
注意 transform 的坐标系和组合顺序
translateX() 和 translateY() 是相对于元素自身左上角的位移，不是父容器可视区。如果元素本身有旋转（rotate()）或缩放（scale()），再叠加 translate 会按函数书写顺序执行——CSS 里靠后的变换先应用。
例如：transform: rotate(30deg) translateX(100px) 表示先向右平移 100px，再绕自身中心旋转 30°；反过来写就会绕原点旋转后再平移，结果完全不同。
滑动动画中建议：
- 单方向滑动只用
translateX()或translateY()，避免和其他变换混用 - 如果必须组合，用
transform: translateX(...) translateY(...)同时写，比分开声明更可控 - 调试时可临时加
outline: 1px solid red查看元素实际占位，确认滑动路径是否符合预期
transform 的调用方式、动画属性的隔离程度，以及硬件加速是否真正启用里。 
