正确使用transition属性可实现颜色平滑过渡，需在初始状态设置transition，配合color、background-color等属性，并确保hover状态有对应颜色变化，避免拼写错误或写在错误位置。
在CSS中，元素颜色变化不平滑通常是因为没有正确设置过渡动画。要实现颜色的平滑过渡，需要使用 transition 属性，而不是“transition-color”（该属性并不存在）。通过合理配置 transition 及其子属性如 transition-property、transition-duration 等，可以让颜色变化自然流畅。
使用 transition 实现颜色渐变
想要让颜色（如文字、背景色）变化平滑，关键在于为相关颜色属性添加过渡效果。常见可过渡的颜色属性包括：
- color：文本颜色
- background-color：背景颜色
- border-color：边框颜色
- box-shadow：阴影颜色（间接支持）
示例代码：
.button {
background-color: #007bff;
color: white;
transition-property: background-color, color;
transition-duration: 0.3s;
transition-timing-function: ease;
}
.button:hover {
background-color: #0056b3;
color: #fff;
}
这样在鼠标悬停时，背景和文字颜色会平滑过渡。
立即学习“前端免费学习笔记（深入）”；
简化写法：使用 transition 缩写
可以直接用 transition 一行定义所有过渡参数，更简洁：
.button {
background-color: #007bff;
color: white;
transition: background-color 0.3s ease, color 0.3s ease;
}
.button:hover {
background-color: #0056b3;
color: #e0e0e0;
}
其中 ease 是默认的缓动函数，也可替换为 linear、ease-in、ease-out 或自定义 cubic-bezier() 以控制动画节奏。
确保触发状态变化时有差异
如果颜色没变化或变化瞬间完成，可能是因为：
- 未设置 hover 或其他状态下的颜色值
- transition 写在了 hover 状态里而非初始状态
- 属性名拼写错误，比如写了 "transition-color"
注意：transition 应定义在正常状态上，这样进入和离开都能触发过渡。
支持更多颜色属性过渡
CSS 支持大多数颜色相关属性的过渡，只要它们是可动画化的。例如：
.card {
border: 2px solid #ccc;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
transition: border-color 0.3s, box-shadow 0.3s;
}
.card:hover {
border-color: #007bff;
box-shadow: 0 5px 15px rgba(0,123,255,0.3);
}
rgba 中的 alpha 通道也可以平滑过渡，实现透明度渐变效果。
基本上就这些。只要正确使用 transition 配合颜色属性，就能解决颜色变化生硬的问题。不复杂但容易忽略细节。
