Hover 时元素回退突兀，本质是 transition 未在常态样式中声明；须将 transition 写在默认态而非：hover 中，并明确指定属性、避免 all，优先用 transform 替代宽高变化以提升性能。
Hover 时元素尺寸变化后回退突兀，本质是过渡动画未覆盖“离开”状态，或 transition 属性未在默认态正确声明。关键不是只在 :hover 里写 transition，而是必须在 ** 常态（非 hover）样式中定义过渡属性 **，让 浏览器 知道“回来时也要动画”。
transition 必须写在常态规则里
很多同学把 transition 只加在 :hover 上，这样只有鼠标移入有动画，移出直接跳变。正确做法是：
- 把
transition: all 0.3s ease-in-out;（或具体属性如width 0.3s ease-in-out, height 0.3s ease-in-out）写在元素的默认样式中 -
:hover里只改尺寸值（如width: 200px;），不重复写transition
避免 all 过渡引发意外动画
用 transition: all 看似省事，但可能让颜色、阴影、边框等非预期属性也动起来，影响性能或观感。建议：
- 明确列出要过渡的属性：
transition: width 0.3s ease-in-out, height 0.3s ease-in-out, transform 0.3s ease-in-out; - 如果用了
transform: scale()做缩放，优先用它代替宽高修改——更流畅且触发 硬件加速
注意盒模型与重排（reflow）问题
直接改 width/height 会触发浏览器重排，尤其在复杂布局中易卡顿。优化方式：
立即学习 “ 前端免费学习笔记（深入）”；
- 用
transform: scaleX()/scaleY()替代宽高变化，不触发重排 - 确保父容器有明确尺寸（如
min-width），避免子元素缩放时引起父级抖动 - 若必须改尺寸，配合
will-change: transform;（慎用，仅对频繁动画元素）提示浏览器提前优化
ease-in-out 不是万能，可微调时序函数
ease-in-out中间快、两头慢，适合自然感交互，但有时回退仍显生硬。可尝试：
-
cubic-bezier(0.34, 1.56, 0.64, 1)——稍加强“缓出”效果，让收尾更柔和 -
transition-timing-function: ease-out;用于:hover态，ease-in用于常态（需分开控制，但需 JS 辅助，一般不推荐） - 统一用
ease或ease-in-out已覆盖大多数场景，优先保证过渡属性位置正确
