优先用 transform: translateX() 替代 left，因不触发重排重绘、性能更优；若用 left，则需匹配定位模式，百分比适配响应式，像素值适用于固定尺寸场景。
keyframes 里 left/right 值写百分比还是 px？
用 @keyframes 控制左右移动时，left 和 right 的单位必须和元素的定位模式匹配。如果父容器没设 position: relative，子元素用 position: absolute + left: 50%，那动画里写 left: 0% 到 left: 100% 才能随父容器宽度缩放；但若写 left: 0px → left: 200px，移动距离就固定死，响应式下会错位。
- 绝对定位元素优先用百分比（配合父容器
position: relative） - 固定像素值适合已知容器尺寸、且不需适配的场景（比如弹窗横向滑入）
- 别混用：
left: 0%→left: 200px会导致浏览器按初始计算值插值，动画路径可能跳变
animation-direction: alternate 不生效？检查 overflow 和 transform
想让元素来回横移（比如呼吸式摇摆），写了 animation-direction: alternate 却只单向跑一次，大概率是父容器 overflow: hidden 截断了回程位置，或者元素本身用了 transform: translateX() 覆盖了 left 动画——CSS 动画中 transform 的优先级高于 left/right。
- 确认动画属性和定位属性没被
transform覆盖（二者选其一，别共存） - 父容器加
overflow: visible或预留足够空白区域，避免回程被裁剪 -
animation-iteration-count: infinite必须显式设置，否则alternate无意义
用 transform: translateX() 替代 left 更稳
直接改 left 触发 layout + paint，动画掉帧明显；transform: translateX() 只走合成器线程，60fps 更容易保得住。尤其在移动端或低配设备上，差异肉眼可见。
- 把
left: 0→left: 100px改成transform: translateX(0)→transform: translateX(100px) - 元素需有
position: relative或absolute（translateX本身不要求定位，但常配合定位使用） - 注意：
translateX(50%)是相对于自身宽度，不是父容器；要相对父容器 50%，得用 JS 算或 CSScalc()
动画卡顿或闪动？查 will-change 和硬件加速开关
即使用了 translateX，某些浏览器（尤其是旧版 Safari 和 Android WebView）仍可能因未启用 GPU 加速而掉帧。此时加 will-change: transform 是个低成本提示，但别滥用——它会让浏览器提前分配图层内存。
- 仅对正在动画的元素加
will-change: transform，动画结束及时移除（可用 JS 切 class 或监听animationend） - 避免同时对多个元素设
will-change，内存压力大时反而更卡 - Chrome DevTools 的 Rendering 面板勾选 “Paint flashing” 和 “FPS meter”，能快速定位是否真在重绘
真正难的不是写对 keyframes，而是判断该用 left 还是 translateX、该让动画受父容器约束还是脱离文档流——这些选择直接影响后续是否要 hack 适配、要不要加 JS 补位。动效越简单，越要先想清楚坐标系归属。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
