按钮悬停效果生硬源于未设过渡动画或transition不合理；应指定具体属性如background-color、transform等，配cubic-bezier缓动函数与0.2–0.3s时长，并用transform+will-change提升性能。
按钮悬停效果生硬，通常是因为没有加过渡动画，或者 transition 设置得不够合理。只要加对了 transition，就能让颜色、大小、阴影等变化变得自然流畅。
明确要过渡的 CSS 属性
不要写 transition: all 0.3s; 这种“全包”写法——它会让所有属性都动，包括你没想动的（比如 visibility 或 display），反而导致意外卡顿或闪烁。
- 只写真正会变的属性，比如：
background-color、color、transform、box-shadow - 示例：
transition: background-color 0.25s ease, transform 0.2s ease;
选对缓动函数（timing-function）
ease 是默认值，但有时太“慢进慢出”，显得拖沓；ease-in-out 更平衡；想更轻快一点，可以用 cubic-bezier(0.25, 0.46, 0.45, 0.94)（类似 Material Design 的标准曲线）。
- 快速微调建议：把
ease换成ease-out，悬停进入更干脆，收起更柔和 - 避免用
linear，它匀速运动，缺乏真实感
控制过渡时长别太长或太短
0.1s 太快，用户几乎感觉不到变化；0.5s 又容易让人觉得延迟。推荐区间是 0.2s–0.3s。
立即学习“前端免费学习笔记（深入）”；
- 小按钮（如图标按钮）：用 0.15s–0.2s，响应更灵敏
- 带位移或缩放的按钮（如轻微上浮 + 阴影增强）：可用 0.25s–0.3s，留出视觉余韵
配合 transform 和 will-change 提升性能
如果用了 transform: translateY(-2px) 这类位移，浏览器能自动启用 GPU 加速；再加 will-change: transform;（慎用，只加在必要元素上）可进一步提示渲染引擎提前优化。
- ✅ 推荐写法：
transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); - ❌ 避免写
top: -2px替代transform，它会触发重排，更卡
