元素悬浮不平滑的主因是transition配置不当；需明确指定属性、时长与缓动函数，避免all滥用，设好初始值，优先用transform/opacity并启用gpu加速。
元素悬浮效果不平滑，通常是因为缺少或配置不当的 transition 属性。只要正确设置过渡的属性名、持续时间和缓动函数，就能实现自然流畅的悬停动画。
确保 transition 作用在正确的 CSS 属性上
transition 不会自动作用于所有变化，必须明确指定要过渡的属性。比如只写 transition: all 0.3s; 虽然方便，但可能触发不必要的重绘，影响性能或表现异常。
- 推荐写法：针对实际变化的属性单独设置，例如
transition: background-color 0.3s ease, transform 0.3s ease; - 避免滥用
all，尤其当元素有 box-shadow、height、width 等开销较大的属性参与变化时 - 如果用了
transform: scale()或translate()，确保 transition 中包含transform，而不是只写transition: 0.3s;（这样无效）
选择合适的缓动函数（timing-function）
默认的 ease 是先慢后快再慢，适合多数场景，但有时会显得“卡顿”或“突兀”。可尝试更柔和或更线性的函数提升观感。
-
ease-in-out：起止都缓，适合按钮缩放、颜色渐变等对称变化 -
cubic-bezier(0.25, 0.46, 0.45, 0.94)：自定义贝塞尔曲线，常用于模仿 iOS 或 Material Design 的弹性感 -
linear：匀速过渡，适合 loading 动画类场景，但悬停中少用，易显机械
注意初始状态与悬停状态的一致性
transition 生效的前提是两个状态之间存在可计算的数值差。若初始值为 unset、auto 或 inherit，浏览器无法插值，会导致跳变。
立即学习“前端免费学习笔记（深入）”；
- 给 hover 前的元素设定明确的初始值，例如
transform: scale(1);而不是留空 - 颜色过渡时，确保
color和background-color都是具体值（如#333或rgb(51, 51, 51)），避免从transparent到rgba()这类隐式转换异常 - 若用 opacity，始终从
opacity: 1→opacity: 0.8，不要依赖默认值
启用硬件加速提升渲染性能
对于 transform 和 opacity 的过渡，添加 will-change: transform; 或 transform: translateZ(0); 可触发 GPU 加速，减少卡顿。
- 推荐写法：
transform: scale(1) translateZ(0);（初始态）和transform: scale(1.05) translateZ(0);（hover 态） - 慎用
will-change，仅在必要时加在 hover 触发前的元素上，避免过度提示造成内存浪费 - 避免对
top/left/width/height做 transition，它们触发 layout，比 transform 慢得多
