使用transition实现颜色平滑过渡，通过设置background-color、color等属性的过渡时间与函数，如transition: background-color 0.3s ease，配合:hover状态，使按钮颜色变化自然，避免跳跃感。
按钮在 hover 时颜色突然变化，看起来像是“跳跃”，这是因为浏览器默认没有过渡动画。要让颜色平滑过渡，不能使用 transition-color（这个属性并不存在），而是使用 CSS 的 transition 属性来控制颜色变化的动画效果。
正确使用 transition 实现颜色平滑过渡
通过给按钮添加 transition 属性，可以让背景色、文字色等在 hover 时缓慢变化，避免突兀的跳变。
background-color: #007bff;color: white;
transition: background-color 0.3s ease, color 0.3s ease;
当鼠标悬停时，改变颜色即可自动触发过渡动画：
&:hover {background-color: #0056b3;
color: #fff;
}
可过渡的颜色属性有哪些？
以下常见的颜色相关属性都支持 transition：
立即学习“前端免费学习笔记（深入）”；
- background-color：背景颜色
- color：文字颜色
- border-color：边框颜色
- box-shadow：阴影颜色（部分支持）
- outline-color：轮廓颜色
提升体验的小技巧
为了让过渡更自然，可以调整 timing function 和持续时间：
- 使用 ease-in-out 让开始和结束更柔和
- 过渡时间建议在 0.2s ~ 0.4s 之间，太长会显得迟钝
- 可统一设置所有属性：
transition: all 0.3s ease，但推荐明确指定以避免意外动画
完整示例代码
.button {padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
}
.button:hover {
background-color: #0056b3;
color: #ddd;
}
基本上就这些。关键是用对 transition，不是什么 transition-color。只要设置了，颜色变化就不会再“跳”了。
