通过设置 transition-duration 为 0.4s，并配合 transition-property 和 timing-function，可使按钮 hover 效果更平滑自然，提升交互体验。
按钮的 hover 效果过快，视觉上会显得突兀。可以通过 CSS 的 transition-duration 属性来延长过渡动画的时间，让效果更平滑自然。
使用 transition-duration 控制过渡时长
默认情况下，CSS 过渡（transition）的持续时间是 0.1~0.2 秒，甚至没有定义时为 0，导致动画一闪而过。你只需设置 transition-duration 为一个合适的值（如 0.3s、0.5s），即可明显放慢动画速度。
例如：
transition-duration: 0.4s;
表示所有过渡属性在 0.4 秒内完成。
立即学习“前端免费学习笔记（深入）”；
推荐写法：明确控制过渡属性
为了更好的性能和控制力，建议不要只写 transition: all 0.4s，而是明确指定需要过渡的属性：
- transition-property：定义哪些属性需要动画（如 background-color、transform）
- transition-duration：设置动画持续时间（如 0.3s、0.5s）
- transition-timing-function：控制动画速度曲线（如 ease、linear、ease-in-out）
完整写法示例：
.btn {
transition-property: background-color, transform;
transition-duration: 0.4s;
transition-timing-function: ease;
}
实际优化建议
- 颜色变化建议用 0.3s ~ 0.5s
- 位移或缩放（transform）可稍短些，如 0.2s ~ 0.3s，避免拖沓
- 搭配 transition-timing-function: ease-in-out 可让动画起止更自然
基本上就这些，合理设置 transition-duration 能显著提升按钮交互体验。不复杂但容易忽略。
