CSS文字动画，替换文字

Question

我在要重建的网站上找到了一个很酷，非常简单的文字动画。这是链接（动画在页面页脚中）：http : //www.motherbird.com.au/process/ 我还不熟悉CSS动画，但是到目前为止，我已经做到了：

.animated{
  display: inline;
  text-indent: 8px;
}

.animated span{
  animation: topToBottom 5s  infinite 0s;
  -ms-animation: topToBottom 5s  infinite 0s;
  -webkit-animation: topToBottom 5s  infinite 0s;
  color: red;
  opacity: 0;
  overflow: hidden;
  position: absolute;
}

.animated span:nth-child(2){
  animation-delay: 1s;
  -ms-animation-delay: 1s;
  -webkit-animation-delay: 1s;
}

.animated span:nth-child(3){
  animation-delay: 2s;
  -ms-animation-delay: 2s;
  -webkit-animation-delay: 2s;
}

.animated span:nth-child(4){
  animation-delay: 3s;
  -ms-animation-delay: 3s;
  -webkit-animation-delay: 3s;
}

.animated span:nth-child(5){
  animation-delay: 4s;
  -ms-animation-delay: 4s;
  -webkit-animation-delay: 4s;
}

@-webkit-keyframes topToBottom{
  0% { opacity: 0; }
  25% { opacity: 0;  }
  50% { opacity: 0;  }
  75% { opacity: 0;  }
  100% { opacity: 1; }
}

<h2>CSS Animations are
  <div class="animated">
    <span>cool.</span>
    <span>neat.</span>
    <span>awesome.</span>
    <span>groovy.</span>
    <span>magic.</span>
  </div>
</h2>

如何进行过渡而不褪色？

谢谢你的帮助！

Answer 1

另一个想法是考虑content使用伪元素来更改文本，您将拥有更少的代码：

.animated {
  text-indent: 8px;
  color:red;
}

.animated:before {
  content: "cool.";
  animation: topToBottom 5s infinite 0s;
}

@keyframes topToBottom {
  0% {
    content: "cool.";
  }
  25% {
    content: "neat.";
  }
  50% {
    content: "awesome.";
  }
  75% {
    content: "groovy.";
  }
  100% {
    content: "magic.";
  }
}

<h2>CSS Animations are
  <span class="animated">
  </span>
</h2>

Answer 2

由于动画的持续时间发生5s，这代表100%了整个的时间，你有五个跨度或单词，因此每个跨度将是可见的1秒或20%时间，然后隐藏，直到结束。基于此，您需要调整%内部的@keyframes以符合条件并达到预期的结果：

.animated {
  text-indent: 8px;
}

.animated span {
  color: red;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  -ms-animation: topToBottom 5s infinite;
  -webkit-animation: topToBottom 5s infinite;
  animation: topToBottom 5s infinite;
}

.animated span:nth-child(2){
  -ms-animation-delay: 1s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.animated span:nth-child(3){
  -ms-animation-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.animated span:nth-child(4){
  -ms-animation-delay: 3s;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.animated span:nth-child(5){
  -ms-animation-delay: 4s;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}


@-webkit-keyframes topToBottom {
  0%, 20% {opacity: 1} /* visible for 1s */
  20.01%, 100% {opacity: 0} /* hidden for 4s */
}

<h2 class="animated">
  CSS Animations are
  <span>cool.</span>
  <span>neat.</span>
  <span>awesome.</span>
  <span>groovy.</span>
  <span>magic.</span>
</h2>

只是.01%在之间的差异的关键帧，确保没有褪色效果。