Rotating Words with CSS Animations

Using CSS Animations we will change or rotate some parts of a sentence.

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 45

Comments are closed.
  1. Hey that’s really awesome, will use it. One question, why its not supported by IE9 or IE? There are bunch of users who still use IE lol.

  2. Great tutorial, although it’s a little bit hard to understand from just your explanation. I had to play around pretty much to actually figure out how things work.

  3. Excellent tutorial. I hope IE will support text animation effects. So we can use them for text animation on all browsers..

  4. Consistently amazed by the things you come up with Mary. How do you get your inspiration for these tutorials? Do you just start experimenting with CSS3/HTML5 stuff and see what comes out of it, or do you have a set goal in mind?

  5. Fantastic Demo… I love all the demo… really really awesome.. Thank you Lou 🙂

  6. Codrops rocks. i have never seen such typo. i have just published short review on

  7. Your tutorials, Mary Lou, are by far my favorite on the web! seriously good job! 🙂

  8. Hi, Really cool!!!

    Is there a way around for displaying a similar if not same effect on IE or even just change the words at an interval?

    • I’m having issues with IE as well. All I want it to do is say, you’re missing out and then direct them to get chrome, if they are using IE…

  9. Codrops always gives the best tutorials.But one concern is that i am an amateur developer so my suggestion is it would be better to give the links of documentation of some stuff like keyframes–why those percentages?Its parameters and possible values?..i can google it through the web and find out but a link in this page would be better.

    Thank you

  10. Great effects; this is a worthy alternative to setting up a slider, for real simple transitions of text only. I would not have thought of using the animation delays to do this with CSS only. Demo 1 and 5 look ready for use, and 4 could work with a little tweaking of the fades. I’d consider for some medium-importance areas, perhaps a blockquote/pullquote type aside, until the browser support is there. It’s too bad we’ll have to wait for IE10 for CSS transitions/animations.

  11. The best web I’ve ever seen with really useful tutorials, they’re nice, they’re easy, and the best: they work! Congratulations from Barcelona.

  12. Amazing! Now how would I go about putting one of these pages on a WordPress site? Is there a tutorial somewhere on how to do this?

  13. Hi, i like this plugin, however it has a problem (or is it my browser -chrome). It works ok at first but then no words appear at all and then they all jumble up and appear together, then there is a long pause and then 2 words appear correctly and then the cycle of multiple words appearing simultaneously and not in sequence happens. any soultions?

    it happens on your demo as well demo 1 and demo 4.

    I used it on this site: http:// http://www.mytimelyne.com

    • Hi Philip, I guess there is something different in the new version of Chrome (and Safari), since this was not happening before… It get’s really obvious when changing tabs and then coming back. In Firefox it works just fine but in Safari the same thing happens. It seems like the timing get’s screwed, as if the animation pauses… Thanks for your feedback, cheers, ML

  14. Hey Mary Lou

    Gotta tell ya I love this one! As an owner of a web-design firm that does not only design, but SEO work; it is always good to see new creative ways to get rich keywords into text.

    Whats more is each one of these can be hyper-linked either internally of externally. We all know clients love pretty colors and movement, but the ability to sell this effect as an SEO plus is a double whammy. 🙂