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.
- "With great power comes great responsibility."Uncle Ben
- "You know, sometimes when you cage the beast, the beast gets angry."Wolverine
- "I want a car. Chicks dig the car."Robin
- "Didn't I kill you already?"Hellboy
- "Listen to me very carefully, my friend: Killing will not bring you peace."Professor X
Related
More demos and snippets
Did you find this useful? There are more demos and code snippets this way.