17370845950

按钮悬停效果生硬源于未设过渡动画或transition不合理；应指定具体属性如background-color、transform等，配cubic-bezier缓动函数与0.2–0.3s时长，并用transform+will-change提升性能。

按钮悬停效果生硬，通常是因为没有加过渡动画，或者 transition 设置得不够合理。只要加对了 transition，就能让颜色、大小、阴影等变化变得自然流畅。

明确要过渡的 CSS 属性

不要写 tra

nsition: 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，它会触发重排，更卡