能，但必须配合@keyframes定义位移规则；animation仅是播放控制器，需先用@keyframes声明起点终点的transform或left/top值，优先用transform:translate()以触发硬件加速、避免重排。
animation 能不能直接改变元素位置？
能，但必须配合 @keyframes 定义位移规则，animation 本身只是播放控制器。直接写 animation: move 2s; 不会生效，因为浏览器不知道 move 是什么——你得先用 @keyframes move { ... } 明确告诉它起点和终点的 transform: translateX() 或 left/top 值。
用 transform: translate() 还是 left/top？
优先用 transform: translate()。原因很实际：
-
transform触发合成层（compositor），动画更流畅，不触发重排（reflow） -
left/top依赖定位上下文（需position: relative/absolute），且修改时会触发重排，卡顿风险高 - 移动端对
transform的硬件加速支持更稳定
示例：水平右移 100px
@keyframes slideRight {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.box {
animation: slideRight 0.5s ease-in-out;
}
为什么设置了 animation 却没动？常见卡点
这不是代码写错，而是几个隐蔽条件没满足：
立即学习“前端免费学习笔记（深入）”；
- 元素没有显式尺寸或内容，导致不可见——加
background或border确认存在 - 父容器
overflow: hidden且位移后超出可视范围，看起来像“没动” -
animation-fill-mode缺失：动画结束后默认回到初始状态。若想停在终点，加animation-fill-mode: forwards; - 用了
display: none或visibility: hidden初始隐藏——visibility: hidden允许动画执行，display: none会彻底中断动画
平移动画需要关注的性能细节
哪怕只是 translate，也有容易被忽略的坑：
- 避免同时动画多个属性（比如
transform+opacity+filter），尤其在低端设备上可能掉帧 - 慎用小数像素位移（如
translateX(0.3px)），某些浏览器渲染模糊或抖动 - 如果动画频繁触发（如 scroll 驱动），用
will-change: transform提前提示浏览器，但别滥用——它会持续占用内存
真正要小心的，不是“怎么写出来”，而是“写出来之后，在旧安卓机、折叠屏、低功耗模式下是否还稳”。动画结束后的视觉残留、输入延迟、甚至键盘弹出时的布局重算，都可能让位移效果变得不可靠。
