In this example, we will learn how to make changing text animation using CSS. We will be using the animation
property and @keyframes
property of CSS to change the texts in an element over a period of a certain time.
html
<span class="animate-text"></span>
css
.animate-text::before {
content: "Hello";
animation: animate infinite 5s;
}
@keyframes animate {
0% {
content: "Hello";
}
25% {
content: "Watch";
}
50% {
content: "This";
}
75% {
content: "Text";
}
100% {
content: "Change";
}
}
Output
In this example, we learned how to make changing text animation using CSS. We used the animation
property that animated the text for 5s and repeat in a loop infinitely and the @keyframes
property to define which content text to display at a certain percentage of the time period of the animation.