CSS动画元素颜色变化如何实现_通过CSS animation与background-color/color实现颜色动态变化

P粉602998670 2025-11-24 00:00:00 次阅读

使用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 实现无限循环。