CSS Examples

How to Make Changing Text Animation using CSS

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.

Prerequisites

Example

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

Conclusion

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.