← All elements
<div class="fq"><p>Build small.</p><p>Ship often.</p><p>Keep it simple.</p></div>About this carousel
Three short quotes that fade in and out in turn, using staggered keyframes on one shared animation.
How it works
Three paragraphs are stacked and share one keyframe with a nine second cycle. The delays of 0 and 3 and 6 seconds mean each is visible for about a third of the time, fading and sliding between lines.
Ways to customise it
- Edit the lines and colours.
- Change the 9s cycle.
- Add a fourth line with a 9s total adjusted.
Good to know
Auto-changing text can be hard to read, so keep each line short and provide the whole content elsewhere. It shows only the first line under reduced motion.
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.