Animatable: A CSS transitions gallery

What kind of transitions can you create with only one property? This is what my new experiment, animatable aims to explore.

It’s essentially a gallery of basic transitions. It aims to show how different animatable properties look when they transition and to broaden our horizons about which properties can be animated. Hover over the demos to see the animation in action, or click “Animate All” to see all of them (warning: might induce nausea, headache and seizures 😛 ). You can also click on it to see more details and get a permalink. Instead of clicking, you can also navigate with the arrow keys and press Esc to return to the main listing.

Fork it on Github and add your own ideas. Be sure to add your twitter username to them as a data-author attribute!

I’ve only tested in Firefox and Chrome for OSX so far. Not sure which other browsers are supported. However, since it uses CSS animations, we know for sure that it won’t work in browsers that don’t support CSS animations.

Hope you enjoy it 🙂

  • That’s a neat idea! Some of those animations are quite surprising.

  • Pingback: xhtml css templates – Animatable: A CSS transitions gallery | Lea Verou | XHTML CSS - Style sheet and html programming tutorial and guides()

  • Great idea Lea! I’ll add something 🙂

  • Max

    Should work in IE10, but doesn’t. Gonna investigate if that’s prefix problem.

    • Max

      Lolz your prefixfree homepage kills IE10. Also it kinda does work, because you can see “-ms-” prefix in html classes, but that’s it. No animations. No errors in console either 🙁

      • Woah, thx. Is the crash reproducible every time?

        • Max

          Yea it is pretty permanent problem

  • Pingback: Animatable: CSS-Transitions im Überblick » t3n News()

  • Julien G (molokoloco)

    Hello, nice work 🙂

    As a lot of person do, i’am also currently working on a jQuery plugin to work with CSS3
    Maybe you could go and check what i have done… I need some advises to maximize performance and rendering quality. For now, i’am on the V0.6 😉 Emitter sprites/Particules factory with jQuery & CSS3
    It’s pretty cool to test CSS properties in live action. PS : I use your nice “incrementable.js” to do the values edit trick in the live editor

    • This is very cool! Let me know when it’s out 🙂

      PS: That’s a Nyan Cat, not a LOL cat.

      • Julien G (molokoloco)

        This is a toy, it’s out now, and it’s a beta ^^ It’s crazy to play with CSS performances limits
        Also i can see there is big perfs issue between ‘transition:all 3000ms linear’ and ‘transition:cubic-bezier(1,0,0,0)’
        I’am surprised because was thinking that wad done by GPU…

  • Pingback: Lea Verou’s Animatable | @drublic()

  • Really nice, Lea. Is there any way of closing the helper-box when you click on a particular box? I tried clicking outside it as it has a sort of lightbox behavior. I know you can refresh the page to get rid of it, but prefer a little ‘X’ button of some sort.


    • You can press Esc, or click the logo, or press the arrows until you reach the start/end.

  • I just tested it on Android. Amazing!

  • Pingback: Linkfutter 10 « F-LOG-GE()

  • Great examples… thanks! 🙂

  • Wow!  Cool stuff!!

  • Dan Eastwell

    How would you couple CSS animations to events? The only ones available in CSS seem to be psuedo-events such as :hover, :active, :focus.

    Would you add a class that triggered a CSS animation with e.g. one iteration? You would probably then want to remove the class in order to trigger the animation again if the event was fired.

    It seems confusing as you almost certainly want animations to be event based, or the animations have limited triggering options (page load, :hover, :active, :focus)

    • Lharby


      You tie the animation to events in jQuery.

    • Those aren’t the only CSS pseudo-classes. :checked and :target are extremely useful for targeting such things based on user interaction.

  • Chris Johnstone

    Hey Lea,

    I’m pretty new to this stuff  – the examples you’ve put up are ridiculously cool. It’s a real eye opener to know how rich the web experience can be now. Very much a fan.

  • Manos

    Very nice and imaginative work! Congrats Lea!

  • thank you for creativity ♥ ☺

  • Thanks for share! 😀

  • Pingback: Revision 45: H.264 in JS, jQuery Standards Team & OccupyHTML5! | Working Draft()

  • Pingback: g | Working Draft()

  • Excellent collection! I’m going to try to dig in deeper to see how it works

  • Pingback: Animatable |

  • Lovely page, nice work.

  • Anonymous

    Do you have an explanation of how it works, in general or specific?  I’ve looked at the code some but there is so much unfamiliar css3 and html5 that frankly, I have no idea what’s going on there. :p  Some explanation would be greatly appreciated.  Thanks!

    • Hey, 
      take a look at index.js, you’ll understand how it works. The data-something HTML attributes you see don’t really mean anything without the script, they’re just custom HTML attributes (which is why they need the data- prefix). 

      Or just view the generated CSS. The script just generates the CSS anyway. If I hardcoded everything, it wouldn’t need any JS for the animations.

      If you still get stuck, just ask me. 🙂

  • Pingback: xhtml css templates – Animatable: A CSS transitions gallery | Lea Verou | XHTML CSS - Style sheet and html programming tutorial and guides()

  • Marco

    nice work!Just a curiosity… why not using an unordered list for the animations?

    • I didn’t see enough reasons for it in this case to justify the extra markup. 
      Btw if I used a list, it would be an ordered one.

  • What I also notice and find interesting is the mind tricks going on on the animatable site. The ghostly grey spots that appear between the boxes. I especially like number 24. where it is the shadow that is moving, not the number., but my brain is convinced it is the number that is bouncing up and down.

    • Haha, and I thought I was the only one seeing that!!

  • An amazing collection of CSS3 transitions and animations. I actually bookmarked this page for future reference. Lea, you’re a great designer for sure. Thanks.

  • Thanks Lea. The ‘animatable’ is very nice. Love the power of CSS3.
    Tested the ‘animatable’ on a Windows OS for several browsers and this is what I found:
    IE8: Does not work.
    IE9: Partially Works.
    Opera 11.52: Partially Works.
    Google Chrome 15: Works perfect.
    Safari 5: Works perfect.
    Mozilla Firefox 7.0: Works perfect.

    • I’m surprised it even partially works in IE9 and Opera, since they don’t support CSS animations so it shouldn’t work at all. Same with IE8 of course.

      • I get a big slice “me no understand” from IE9 the image shows what version. 

        • CSS transitions & animations are not supported by IE9.

        • telfire

          Yes they are, just not 3d.

        • You are confusing transitions with transforms. Transitions and animations are indeed NOT supported by IE9. They are supported by IE10 though.

  • i’m impressed with CSS3 secret master…
    but i want laugh, when read TAKK!
    hu hihihi hu hihihi
    /m ☺ ♥ ☻

    • Somebody commented in the wrong thread, and it ain’t me 😛

  • Is it just me or it feel little bit slow? Simple fade takes 10% of CPU in Chrome. And I don’t know why but FF7 hates that page… Quite often eats 50% on it 🙁 And its dual core 3Ghz processor, not some netbook.
    Haven’t seen anyone else writing about this. Is it just me?

  • bark zhang

    it’s strong example!!

  • Wow, it’s hard to contact you except via linkedin and comments, so I have a feeling you’ll never get this, but…

    Prefixer is awesome!
    I noticed that **if the css class isn’t there, it doesn’t work.**  Sounds odd, but if styles are being integrated in different contexts, javascript, inline, or like how you present the code for the CSS patterns, it doesn’t fly.  Any chance you could mend that?  If I knew python I would, but sadly not. 

    I’ve developed a css parser with javascript, that’ll do the same as css-prefixer, but given everyone currently uses your tool, there’s no point in tossing a redundant, and relatively ugly coded copy up on the web.


    • Hi David,

      Not sure why you say it’s hard to contact me. My email is published in the about section of this blog (lea at this domain). 
      Could you please drop me an email and elaborate a bit? I’m not sure in which cases “it doesn’t fly”. But I have a hunch you’re talking about dynamic CSSOM changes. In that case, take a look at the dynamic DOM plugin (Plugins section on the official project page).

  • Amazing! Very good work. I must play with all this examples… thanks for sharing!

  • Good work! I must play with all of this examples… I love it. Thanks for sharing.

  • Alejandro Abarca R

    Very nice transitions, beautiful examples. I’ll just add some js to improve the animations.

  • It’s an excellent idea and I love it… forked it on github

  • Thanks for this, truly awesome to see implementation of css3 properties you have a gift for seeing potentials, and I’m running with ideas now myself!

  • Pingback: Innovators of the Web | ClintonNash()

  • Quiliro

    What license does Animatable use? If it an FSF aproved license it would be nice.

    • MIT license, like most of my stuff.

  • Pingback: CSS Animations « Balássy György szakmai blogja()

  • paula

    Hi! Would love to see this but the page isn’t loading?

  • Pingback: Top 5 CSS3 Animation Plug-ins: Review|CSS Animation Studio()

  • EricM

    Lea, this is GREAT!

    I’m a beginner and am a bit embarrassed to say that can’t figure out where to look at you code so that I can learn how to do this myself. Normally I’d look at somebody’s HTML, CSS and JS (which I don’t know very well yet) to try and learn from them.

    Can you, or someone give me some hints on how to use your examples there as ‘learning opportunities’? Where do I need to look to cut and past code that I can then play around with.

    Not to say you or any of the ‘big names’ ever mean to do this intentionally…but sometimes there’s an assumption that all the people who look at the wonderful stuff that’s available have an advanced knowledge of what’s going on. That’s not always the case.
    Thanks for all your great work!

  • Pingback: 30 Pure CSS3 Tutorials & Examples()

  • EMiner

    I have a very simple newbie question: I really want to see the CSS for these examples. You mentioned viewing the generated CSS….So…how does one do that?

  • Juppy Lumacang Biwang

    hmmm i just love your site 🙂

  • Abid Riaz

    for what i m looking, found here … thanks

  • Pingback: 22 Best CSS Transition Tutorials - Design Sparkle()

  • Pingback: Webizines | How to Use The CSS3 Sectioning Elements()

  • Pingback: Free 30 Most Useful HTML5, CSS3 Tutorials & Examples()

  • Pingback: Helping Content Overlay CSS3 Transitions()

  • Pingback: An Excellent Collection Of Pure CSS3 Tutorials & Examples |

  • Pingback: 30+ Excellent Pure CSS3 Tutorials & Examples You Will Love | CreativeCrunk()

  • Angeliki Panayotou

    How can I add it to a tumblr theme using css?

  • Pingback: Animatable: Border | Brandon Rozek()

  • Pingback: angara fahise()

  • Pingback:

  • Pingback: 4cyn5et4m5t94c5t9m4vn54cx65()

  • Pingback: