Responsive CSS3 Fading Quotes (no JavaScript)

Fade-in quotes or testimonials elegantly with this CSS3 demo.

The CSS-only aspect works in modern browsers and IE10+, although I've provided a snippet of JavaScript to support IE9 too (no fade effect in IE9). IE7/8 users will just see the last quote.

If you change the number of quotes, don't forget to modify the CSS animations and keyframe values! OR, if you'd rather not deal with calculations, try the JavaScript powered quotes demo that does all the hard work for you.

Tip: Put the longest text as the last item so that the quote box pushes down any relatively positioned content sat underneath.

Please view the source of this page to see the HTML markup, CSS and JS. Also refer to the CSS comments for keyframe calculations.


More demos and snippets

Did you find this useful? There are more demos and code snippets this way.