应优先用 transform: translate() 替代 left/top 实现位移动画，因其仅触发合成、不引发重排，性能更优；需统一单位、显式声明起始状态，并通过 JS 计算偏移量或 CSS 自定义属性实现精准定位。
用 transform: translate() 替代 left/top 做位移动画
直接改 left 或 top 触发的是布局重排（reflow），动画卡顿明显，尤其在中低端设备上。现代 CSS 动画应优先用 transform，它只触发合成（compositor），性能好、更顺滑。
-
left/top依赖父容器为position: relative/absolute，且会挤压其他元素（若非position: absolute） -
transform: translate(x, y)是独立于文档流的，不影响布局，也不触发重排 -
浏览器对
transform的硬件加速支持更成熟，@keyframes中写transform更稳妥
@keyframes 里写 transform 而不是 left
即使你坚持用 @keyframes，也别在关键帧里写 left: 100px 这类声明。动画属性要可被 GPU 加速，transform 和 opacity 是最安全的两个。
@keyframes slideIn {
from {
transform: translateX(-100px);
}
to {
transform: translateX(200px);
}
}- 避免混用：不要在同一个动画里既写
left又写transform，后者会覆盖前者，且行为不可预测 - 单位要一致：
translateX(200px)和translateX(50%)不能混在同一个 keyframe 序列里（百分比解析上下文可能变化） - 起始状态建议显式声明：
transform: translateX(0)，别依赖默认值，防止动画跳变
如何让元素「精确移动到指定坐标」（比如页面某点）
CSS 本身没有“绝对坐标定位 + 动画”一体化语法。所谓“移动到指定位置”，本质是算出相对偏移量，再用 translate 实现。常见做法：
- 先用 JS 获取目标位置（如
element.getBoundingClientRect()），减去当前元素位置，得出dx,dy - 把结果设为自定义属性：
style.setProperty('--dx', dx + 'px')，然后在 keyframes 中引用：transform: translate(var(--dx), var(--dy)) - 如果纯 CSS 解决，只能预设偏移值，比如知道目标在视口右下角，就写
translate(calc(100vw - 100px), calc(100vh - 50px))（需考虑滚动和边框）
动画卡顿或闪动？检查是否触发了重绘（repaint）
即使用了 transform，某些 CSS 属性仍会让动画掉帧，比如 box-shadow、border-radius 频繁变化，或背景图反复重绘。
立即学习“前端免费学习笔记（深入）”；
- 加
will-change: transform提前告知浏览器该元素将动画（但别滥用，会增加内存开销） - 确保父容器没设
overflow: hidden且子元素 translate 超出范围——这会导致部分浏览器强制回退到 CPU 渲染 - 移动端要注意：iOS Safari 对
transform: translateZ(0)兼容性更好，可加作兜底（但仅限必要时）
CSS 动画的“指定位置”不是坐标系意义上的绝对定位，而是相对自身起点的位移。真正难的不是写 keyframes，而是判断这个位移值从哪来、要不要响应式更新、以及是否在滚动/缩放等交互中保持稳定。
