不规则图形平移必须用 transform：因 left/top 依赖盒模型，而裁剪或变形后边界不稳定；transform 只操作渲染层，不触发重排，是唯一可靠方式。
不规则图形平移必须用 transform，不能靠 left/top
直接改 left 或 top 对不规则图形（比如 SVG 路径、clip-path 切割后的 div、border-radius 极端变形的元素）几乎必然出错：位置计算依赖盒模型，而这些图形的“边界”常被裁剪或重绘，浏览器无法稳定映射 offset 值。唯一可靠路径是 transform: translate()——它只操作渲染层，不碰布局，绕过所有形状干扰。
@keyframes 里只能写 transform，别混用其他定位属性
常见错误是这样写：
@keyframes badMove {
from { left: 0; transform: translateX(0); }
to { left: 200px; transform: translateX(200px); }
}
结果动画卡顿甚至失效。原因：left 触发重排，transform 触发合成，两者不同步。正确写法只保留 transform：
@keyframes goodMove {
from { transform: translateX(0) translateY(0); }
to { transform: translateX(150px) translateY(-30px); }
}
- 所有位移必须统一用
translateX()/translateY()/translate() - 如果图形本身有
transform-origin偏移（比如旋转中心不在中心），平移前先确认原点是否影响路径——必要时在动画外显式重置：transform-origin: 0 0; - SVG 中的
<path></path>元素，直接对它加animation即可，无需包裹容器
clip-path 或 SVG 路径平移时，注意坐标系差异
用 clip-path: polygon(...) 或 SVG <path d="M..."></path> 定义的不规则图形，其“视觉中心”和 CSS 盒子的 offsetWidth/Height 常不一致。此时 translate() 的像素值不是相对于页面，而是相对于该元素自身的坐标系：
- 对普通 div +
clip-path，translateX(100px)是从裁剪后可见区域左边缘开始移动 - 对 SVG
<path></path>，translate()作用于 path 的局部坐标系，若<svg></svg>有viewBox，需换算比例（例如viewBox="0 0 100 100"下translateX(10)实际移动 10% 宽度） - 调试技巧：临时加
outline: 1px solid red;看真实盒模型边界，再对比 clip-path 可见区域
移动端真机上平移抖动？检查小数像素和 will-change
不规则图形在 iOS Safari 或旧安卓 WebView 上平移时出现模糊、跳帧，大概率是这两个问题：
-
translateX(0.7px)这类非整数位移——强制四舍五入到整像素：transform: translateX(calc(100px + 0.5px));改为translateX(100px) - 动画频繁触发（如 scroll 绑定）但没提示合成层：
will-change: transform;加在动画元素上，但仅限真正需要时——长期开启会吃内存 - 更隐蔽的坑：父容器用了
perspective或backface-visibility: hidden，可能意外改变子元素合成行为，测试时先临时注释掉
真正难搞的不是让图形动起来，而是让它在折叠屏展开瞬间、低功耗模式下、键盘弹出后，依然停在该停的位置——这时候 animation-fill-mode: forwards 和避免用 display: none 切换状态，比动画本身还关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
