实现平滑hover动画需在常态样式中声明transition，优先使用transform和opacity等gpu加速属性，避免height、width等触发重排的属性，时长设为0.25s–0.4s并搭配ease-in-out等缓动函数。
要让 hover 动画真正平滑，关键不是加 transition，而是加对位置、选对属性、设好起始值。
transition 必须写在常态样式里
浏览器需要知道“从哪开始变”，才能计算中间帧。如果只写在 :hover 中，鼠标移出时会直接跳回原样，毫无过渡。
- ✅ 正确：在基础类中声明，比如 .btn { transition: background-color 0.3s ease; }
- ❌ 错误：在 .btn:hover { transition: ... } 里写 —— 进入有动画，离开无动画
只对可动画且性能好的属性做过渡
不是所有 CSS 属性都适合 transition。有些会触发重排（layout），导致卡顿甚至突兀。
- 推荐用 transform（如 translate、scale、rotate）和 opacity：GPU 加速，不重排
- background-color 可以过渡，但必须在常态中显式声明初始值（不能靠继承或默认）
- 避免对 height、width、margin、padding、top/left 做过渡 —— 易引发重排，体验差
控制节奏：时长与缓动函数要合理
0.3 秒左右是人眼感知最自然的过渡时长；太短像没动，太长像卡顿。
- 常用时长：0.25s–0.4s，例如 transition: transform 0.3s ease-in-out;
- 默认 ease 有时偏“弹”，ease-in-out 更均衡；追求细腻可用 cubic-bezier(0.25, 0.46, 0.45, 0.94)
- 想进快出慢？可配合 :not(:hover) 单独设延迟或时长，实现不对称过渡
避免简写覆盖导致过渡失效
用 background 简写会清空之前设的 background-color，让过渡断掉。
- ❌ 错误：.btn { background-color: #4a6fa5; } .btn:hover { background: #1a3a6a url(icon.svg); }
- ✅ 正确：hover 中也只改 background-color，图片用 background-image 单独控制
- 同理，不要在 hover 中突然加 border 或改 display —— 它们不支持平滑插值
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
