使用CSS animation和@keyframes可实现元素颜色动态变化，通过定义关键帧控制background-color或color属性，结合animation属性应用到目标元素，实现平滑过渡，如背景色由白变蓝、文字由灰变红，并可通过forwards保持最终状态，支持多属性同时动画与无限循环，配合缓动函数优化视觉效果。
要实现CSS动画中元素的颜色动态变化，可以通过 CSS animation 结合 background-color 或 color 属性来完成。这种方式无需JavaScript，仅用纯CSS即可创建平滑的色彩过渡效果。
使用 @keyframes 定义颜色动画
核心是利用 @keyframes 规则设定颜色变化的关键帧，然后将该动画绑定到目标元素上。
例如，让一个按钮的背景色从白色渐变为蓝色：
@keyframes changeBgColor {
0% {
background-color: white;
}
100% {
background-color: blue;
}
}
.animated-box {
width: 100px;
height: 100px;
background-color: white;
animation: changeBgColor 2s ease-in-out;
}
这段代码会让元素在2秒内完成从白色到蓝色的背景色过渡。
改变文字颜色（color）的动画
如果想让文本颜色动态变化，只需将 background-color 替换为 color。
立即学习“前端免费学习笔记（深入）”；
比如实现标题文字由灰色变红色：
@keyframes changeTextColor {
0% {
color: gray;
}
100% {
color: red;
}
}
.title {
animation: changeTextColor 1.5s forwards;
}
forwards 表示动画结束后保持最后一帧的状态，避免颜色回退。
结合多个颜色属性同时动画
你也可以同时改变背景和文字颜色，提升视觉表现力。
@keyframes changeColors {
0% {
background-color: #fff;
color: #333;
}
50% {
background-color: yellow;
color: green;
}
100% {
background-color: black;
color: white;
}
}
.alert-box {
padding: 20px;
text-align: center;
animation: changeColors 3s ease-in-out infinite;
}
这个例子实现了三阶段颜色切换，并通过 infinite 实现无限循环。
优化动画流畅性
为了获得更自然的过渡效果，可以使用 transition 配合 animation，或选择合适的缓动函数如 ease-in、ease-out 或自定义贝塞尔曲线。
常见取值包括：- ease：慢开始快结束
- linear：匀速变化
- cubic-bezier(0.1, 0.7, 1.0, 0.1)：自定义加速度
合理设置时间长度和延迟可避免视觉突兀感。
基本上就这些。通过灵活运用 @keyframes 和 animation，配合 background-color 与 color，就能轻松实现丰富的颜色动画效果。不复杂但容易忽略细节，比如初始状态一致性与结束保持策略。
