仅使用CSS3如何让文本闪动？

Question

是否有可能制作一个脉动文本效果，给定一个字符串“Hello World”，每隔几秒钟就从绿色缓慢过渡到蓝色，然后从蓝色缓慢过渡到绿色，绿色到蓝色，蓝色到绿色，而不需要任何一行JavaScript？（是否有任何SCSS或SASS快捷方式可用？）

- Rolando

---

是的，没错。你尝试过什么或者你认为哪些是一个好的开始？ - Bram Vanroy

任何一种解决方案有帮助吗？如果可能，请选择一个答案。 - Chris Mukherjee

Answer 1

这是您所需的CSS3代码：

.textClass {
 -webkit-animation: color_change 1s infinite alternate;
 -moz-animation: color_change 1s infinite alternate;
 -ms-animation: color_change 1s infinite alternate;
 -o-animation: color_change 1s infinite alternate;
 animation: color_change 1s infinite alternate;
}

@-webkit-keyframes color_change {
 from { color: blue; }
 to { color: green; }
}
@-moz-keyframes color_change {
 from { color: blue; }
 to { color: green; }
}
@-ms-keyframes color_change {
 from { color: blue; }
 to { color: green; }
}
@-o-keyframes color_change {
 from { color: blue; }
 to { color: green; }
}
@keyframes color_change {
 from { color: blue; }
 to { color: green; }
}

<p class="textClass">Hello World</p>

阅读：http://tjvantoll.com/2012/02/20/CSS3-Color-Animations/ 了解更多信息。

- Chris Mukherjee

---

+1，但是代码可以更紧凑。首先，-ms-版本是不必要的，它只在早期的IE10预览版中必要。IE9不支持动画，而IE10支持无前缀的动画。另外，你可以在.textClass中写入color: blue并省略from关键帧（它将从你在类中拥有的内容自动生成）。 - Ana

Answer 2

好的：

@keyframes textColorChange {
    0% {color: #0000ff;}
    50% {color: #00ff00;}
    100% {color: #0000ff;}
}
/* Use @-webkit-keyframes for Safari/Chrome */

#textElement {
    animation: textColorChange 2s infinite;
}
/* Use -webkit-animation for Safari/Chrome */

- Marc Marta

Answer 3

尝试这个：

CSS：

@-webkit-keyframes altrclr{
  0%{
    color:red;
  }
  50%{
    color:green;
  }
}

#a{
  margin:40%;
  font-size:20px;
  color:red;
  -webkit-animation: altrclr 3s infinite alternate;  
  -webkit-transform:scale(4);
}

Html

<div id='a'>
    Hello World
</div>

演示

- Arpit

---

请不要仅使用WebKit前缀。特别是当其他所有主要浏览器的当前版本都支持未带前缀的语法时 - 请参见http://caniuse.com/#feat=css-animation - Ana