Changing words with CSS animation

In this blog post I will show how to make words change with CSS animations. The idea is to have a sentence, and one of the words will change into certain words.

The structure

The text-wrapper will be the main wrapper, and inside that wrapper, we’ll place the sentence.
The animated-words will appear one at a time, and in able to do that we need to use CSS animation.

<div class="text-wrapper">
    The quick brown fox jumps over the lazy&nbsp;
    <div class="animated-words">
        <span>dog</span>
        <span>horse</span>
        <span>frog</span>
        <span>cat</span>
        <span>mouse</span>
        <span>rabbit</span>
    </div>    
</div>

The CSS & Animation

We’ll make the main wrapper center it on the page.

.text-wrapper {
    text-align: center;
}

The animated-words should be aligned inline, so it will be aligned with the whole sentence without breaking the flow.

.animated-words {
    display: inline-block;
}

I have used the nth-child to match the position of the span element. So I can change the color of the words and the animation delay.

For example:
The first one below (animated-words span:nth-child(2)), is the second word, which will have the color of #6b889d and 3 seconds delay.

.animated-words span:nth-child(2) { 
    -webkit-animation-delay: 3s; 
    -ms-animation-delay: 3s; 
    animation-delay: 3s; 
    color: #6b889d;
}
.animated-words span:nth-child(3) { 
    -webkit-animation-delay: 6s; 
    -ms-animation-delay: 6s; 
    animation-delay: 6s; 
    color: #6b739d; 
}
.animated-words span:nth-child(4) { 
    -webkit-animation-delay: 9s; 
    -ms-animation-delay: 9s; 
    animation-delay: 9s; 
    color: #7a6b9d;
}
.animated-words span:nth-child(5) { 
    -webkit-animation-delay: 12s; 
    -ms-animation-delay: 12s; 
    animation-delay: 12s; 
    color: #8d6b9d;
}
.animated-words span:nth-child(6) { 
    -webkit-animation-delay: 15s; 
    -ms-animation-delay: 15s; 
    animation-delay: 15s; 
    color: #9b6b9d;
}

Each span inside of a animated-words div will be positioned absolutely and we’ll hide any overflow.
To get the animation to work, we’ll have to bind the animation to the element animated-words span. Inside the webkit-animation we’ll place the animateWord and call that in the @keyframe.
The animation will run in total of 18 seconds and will have the same speed from start to end (linear), will continue forever(infinite) and without animation delays.

.animated-words span {
    position: absolute;
    opacity: 0;
    overflow: hidden;
    color: #6b969d;
    -webkit-animation: animateWord 18s linear infinite 0s;
    -ms-animation: animateWord 18s linear infinite 0s;
    animation: animateWord 18s linear infinite 0s;
}

The words will fade-in from top to the bottom, it’ll start with 0 opacity to 1 to show the word and before showing the next word the opacity will change back to 0.

So inside this keyframe we have to specify that to have the fade-in effect by using 0%(start) to 100%(complete).
The animation starts with 0 opacity, and on 2% the word will start from the top with -30px , still with 0 opacity. And from 5% to 17% the opacity will be 1 and the position of the word is 0px. And from 20% to 100% the word will fade-out to 30px to the bottom with 0 opacity.

@-webkit-keyframes animateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -webkit-transform: translateY(-30px); }
    5% { opacity: 1; -webkit-transform: translateY(0px);}
    17% { opacity: 1; -webkit-transform: translateY(0px); }
    20% { opacity: 0; -webkit-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}

Here’s a demo that I have created.