CSS Text Animation, replace text

Question

I found a cool, very simple text animation on a website that I would like to rebuild. Here is the link (the animation is in the footer of the page): http://www.motherbird.com.au/process/ I'm not familiar with CSS animations yet, but I've managed that so far:

.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>

How do I make the transition without fade?

Thanks for your help!

Answer 1

Another idea is to consider content of a pseudo element to change the text and you will have less of code:

.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

Since the animation-duration takes 5s, which represents 100% of the whole duration, and you have five spans or words, therefore each span will be visible for 1s or 20% of the time, then hidden until the end. Based on that you need to adjust the %'s inside the @keyframes to met the criteria and achieve the desired result:

.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>

Just .01% of a difference between the keyframes makes sure there is no fading effect.