使用 CSS3 更改文本颜色的循环动画答案

【问题标题】：Looping Animation of text color change using CSS3使用 CSS3 更改文本颜色的循环动画
【发布时间】：2013-05-22 20:39:08
【问题描述】：

我有想要动画的文本。例如，不是悬停，而是不断地从白色慢慢变为红色，然后又变回白色。

到目前为止，这是我的 CSS 代码：

#countText{
    color: #eeeeee;
    font-family: "League Gothic", Impact, sans-serif;
    line-height: 0.9em;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-shadow: 0px 0px 6px ;
    font-size: 210px;
}

【问题讨论】：

看看developer.mozilla.org/en-US/docs/Web/Guide/CSS/…
非常感谢。这么好的来源。
@Alex Jj 当值为“0”时，您可以去掉“px”或任何单位。你在一个大的 CSS 文件上总结了一些值得的字节。数字值时前导“0”。

标签： css transition css-animations

【解决方案1】：

另一个示例：

.center {
  margin: 0 auto;
}

.awesome {
  font-family: futura;
  font-style: italic;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  color: #313131;
  font-size: 45px;
  font-weight: bold;
  position: absolute;
  -webkit-animation: colorchange 20s infinite alternate;
}

@-webkit-keyframes colorchange {
  0% {
    color: blue;
  }
  10% {
    color: #8e44ad;
  }
  20% {
    color: #1abc9c;
  }
  30% {
    color: #d35400;
  }
  40% {
    color: blue;
  }
  50% {
    color: #34495e;
  }
  60% {
    color: blue;
  }
  70% {
    color: #2980b9;
  }
  80% {
    color: #f1c40f;
  }
  90% {
    color: #2980b9;
  }
  100% {
    color: pink;
  }
}

<div class='center'>
  <p class="awesome">ISN'T THIS AWESOME!</p>
</div>

【讨论】：

虽然此代码链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。

【解决方案2】：

使用keyframes 和animation 属性

p {
  animation: color-change 1s infinite;
}

@keyframes color-change {
  0% { color: red; }
  50% { color: blue; }
  100% { color: red; }
}

&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad quos autem beatae nulla in.&lt;/p&gt;

带前缀的 CSS

p {
    -webkit-animation: color-change 1s infinite;
    -moz-animation: color-change 1s infinite;
    -o-animation: color-change 1s infinite;
    -ms-animation: color-change 1s infinite;
    animation: color-change 1s infinite;
}

@-webkit-keyframes color-change {
    0% { color: red; }
    50% { color: blue; }
    100% { color: red; }
}
@-moz-keyframes color-change {
    0% { color: red; }
    50% { color: blue; }
    100% { color: red; }
}
@-ms-keyframes color-change {
    0% { color: red; }
    50% { color: blue; }
    100% { color: red; }
}
@-o-keyframes color-change {
    0% { color: red; }
    50% { color: blue; }
    100% { color: red; }
}
@keyframes color-change {
    0% { color: red; }
    50% { color: blue; }
    100% { color: red; }
}

【讨论】：

不客气 :) 你可以用animation 做很多很酷的事情。阅读this。