position属性本身不能被transition直接动画，必须通过top/left或transform等数值型属性实现；transition须写在常态选择器中，且初始值与目标值均为具体数值，transform因性能更优而被推荐。
position 属性本身不能被 transition 动画
直接对 position 值（如从 static 切换到 absolute）加 transition 完全无效——浏览器不支持离散类型属性的过渡，会立刻切换，没有中间帧。
常见错误写法：transition: position 0.3s; 或在 :hover 中只改 position 值，结果是“啪”一下跳变，毫无动画。
真正可动画的是「已定位元素」的偏移量或变换量，前提是：
- 元素已设为
relative、absolute或fixed（不能是static） - 动画目标是数值型属性：如
top、left、transform等 -
transition必须写在常态选择器上（不是只写在:hover里）
top/left 等偏移属性可以过渡，但有硬性前提
用 top 和 left 配合 transition 是可行的，但极易失效，关键限制在于初始值必须是具体数字，不能是 auto。
例如以下代码不会触发动画：
.box { position: absolute; left: auto; top: 20px; transition: left 0.3s; }
.box:hover { left: 100px; }
因为 left: auto 不是可插值的数值，浏览器无法计算过渡路径。修复方式是显式设为数值：
- 把
left: auto改成left: 0或具体像素值 - 确保
top/left在常态和悬停态都是带单位的数字（如10px、50%） - 避免混用单位（比如常态用
px，悬停用%），会导致过渡中断
transform 是更推荐的位置动画方案
相比 top/left，transform: translate() 是性能更优、行为更可靠的选择，原因很实际：
-
transform只触发重绘（paint）或合成（composite），不触发重排（layout），滚动/悬停时更流畅 - 天然支持 GPU 加速，尤其在移动端和高刷新率屏上差异明显
- 不受父容器尺寸变化影响，位移基准始终是自身坐标系，逻辑更稳定
- 无需担心
auto值陷阱，只要常态设transform: translate(0, 0)就行
正确写法示例：
.icon { position: absolute; right: 20px; top: 20px; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.icon:hover { transform: translate(-5px, -5px); }
transition 写在哪？容易被忽略的生效条件
transition 必须定义在常态元素上，而不是仅在伪类（如 :hover）中声明。否则鼠标移入可能有动画，但移出时会“啪”地弹回原位——因为常态下没定义过渡，浏览器直接硬切。
错误示范：.btn:hover { transition: transform 0.3s; transform: scale(1.1); }
正确结构是三段式：
- 常态：设好
transform初始值（如transform: scale(1)） - 常态：声明
transition（如transition: transform 0.3s ease） -
:hover：只改目标值（如transform: scale(1.1)）
这个顺序一旦颠倒，动画就只剩半程有效。很多人在调试时反复改 :hover 却忽略常态定义，卡在这里很久。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
