Sometimes we need to spin some words in a line of text. Whether we are creating a message box, alerting users, or describing features of something. In this regard, we always try to create something attractive. Of course! we use some CSS animations while creating attractive assets. So, today we are going to create changing word animation using pure CSS.
Yes, you heard right! we’ll change words using CSS without using JavaScript. Here I’ll show you two possible ways to change words with CSS animation. The first one is straightforward to display word after word with fading animation. The other one is word spinning animation while keeping other text static.
You can browse the demo page to check out the words changing animation before getting started with coding.
The HTML Structure
In HTML, create a container (a div element with the class name «container» ) and place your words with the following mentioned classes. In the following code example, you can place five words that will change with fading animation.
If you want to add more words, just create another div element with the class name «word» and «w6» . Likewise, follow the same method for your upcoming words.
Welcome
to
Codeconvey
This is a pure CSS
Words Changing Animation
Another way to change only a word while keeping other text static, use the following HTML structure. You just need to create a span element with a unique id, like “spin”. In this way, we’ll use the CSS content attribute to spin the words.
This is inline word changing animation
In CSS, define some basic styles for text containers. The design for this container (shown on the demo page) is optional, you can modify it according to your needs. You just need to keep its position to relative.
After that, define the styles for words, set the font-size, font-weight, and other properties as you need. In “.word” selector, the position absolute and opacity 0 is necessary to work the animation. So, keep these values as it is.
Now, define the CSS animation keyframes for words just like below:
Apply animation to words classes. If you want to run animation once, use the “forwards” instead of “infinite”.
Now, we’ll define CSS styles for second words changing animation. Here, we’ll place the spin animation in after pseudo selector and define a set of words in animation keyframes.
Just place words in spin animation keyframes that described below:
That’s all! I hope now you are able to change words using CSS only. If you have any questions or suggestions related to text effects, don’t hesitate to comment below.
Collection of hand-picked free HTML and CSS text animation code examples from Codepen, GitHub and other resources. Update of May 2021 collection. 28 new items.
Experimenting with a CSS blur filter, text-shadow , and transform skew effects animated. Pause the animation on typo mouseover, not fog. On mobile touch typo to pause and touch anywhere else on the screen to run it again.
Sometimes simple is just as effective as complex. I’m a huge fan of typography and in this example by Steven Sinatra an SVG mask is used to help isolate the text and animate it in place. A fun approach that can be used for those well-known hero sections.
CSS only animated frozen text effect with background-clip , mix-blend-mode and gradient text. JS is to make the text editable for demo purpose, not required for the effect.
