CSS Text Animation, replace text - css

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.

Answer 3

Try visibility: hidden | visible:
.animated{
display: inline;
text-indent: 8px;
position: relative;
}
.animated span{
animation: topToBottom 5s infinite 0s;
-ms-animation: topToBottom 5s infinite 0s;
-webkit-animation: topToBottom 5s infinite 0s;
color: red;
/* display: none; */
overflow: hidden;
position: absolute;
display: inline-block;
visibility: hidden;
}
.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% { visibility: hidden; }
20% { visibility: hidden; }
40% { visibility: hidden; }
60% { visibility: hidden; }
80% { visibility: hidden; }
100% { visibility: visible; }
}
<h2>CSS Animations are
<div class="animated">
<span>cool.</span>
<span>neat.</span>
<span>awesome.</span>
<span>groovy.</span>
<span>magic.</span>
</div>
</h2>
for 10 words:
.animated{
display: inline;
text-indent: 8px;
position: relative;
}
.animated span{
animation: topToBottom 10s infinite 0s;
-ms-animation: topToBottom 10s infinite 0s;
-webkit-animation: topToBottom 10s infinite 0s;
color: red;
/* display: none; */
overflow: hidden;
position: absolute;
display: inline-block;
visibility: hidden;
}
.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;
}
.animated span:nth-child(6){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.animated span:nth-child(7){
animation-delay: 6s;
-ms-animation-delay: 6s;
-webkit-animation-delay: 6s;
}
.animated span:nth-child(8){
animation-delay: 7s;
-ms-animation-delay: 7s;
-webkit-animation-delay: 7s;
}
.animated span:nth-child(9){
animation-delay: 8s;
-ms-animation-delay: 8s;
-webkit-animation-delay: 8s;
}
.animated span:nth-child(10){
animation-delay: 9s;
-ms-animation-delay: 9s;
-webkit-animation-delay: 9s;
}
#-webkit-keyframes topToBottom{
0% { visibility: hidden; }
10% { visibility: hidden; }
20% { visibility: hidden; }
30% { visibility: hidden; }
40% { visibility: hidden; }
50% { visibility: hidden; }
60% { visibility: hidden; }
70% { visibility: hidden; }
80% { visibility: hidden; }
90% { visibility: hidden; }
100% { visibility: visible; }
}
<h2>CSS Animations are
<div class="animated">
<span>cool.</span>
<span>neat.</span>
<span>awesome.</span>
<span>groovy.</span>
<span>magic.</span>
<span>more.</span>
<span>lorem.</span>
<span>pixel.</span>
<span>word.</span>
<span>ten.</span>
</div>
</h2>