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>