← All elements
<p class="rw">CSS is <span class="wd"><b>fast.</b><b>modern.</b><b>fun.</b><b>fast.</b></span></p>About this animation
A line of text where one word swaps through a list vertically, clipped to a single line with overflow hidden.
How it works
The changing word sits in a box exactly one line tall with overflow hidden, so only one word shows. The words are stacked in a column, with the first word repeated at the end, and a keyframe moves the column up by one, two, then three line heights. The repeated word makes the loop restart without a visible jump.
Ways to customise it
- Replace the words in the b elements, keeping the first one repeated at the end.
- Change the 6s duration.
- Adjust the percentages if you add more words.
Good to know
Screen readers read all the words in order, so write them so the sentence still makes sense. The animation stops for reduced motion, which leaves the first word visible.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.