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 :P ). 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 :)

  • http://twitter.com/gregtyler Greg Tyler

    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

  • http://www.facebook.com/roman01la Roman Liutikov

    Great idea Lea! I’ll add something :)

  • http://twitter.com/suprMax Max

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

    • http://twitter.com/suprMax Max

      Lolz your prefixfree homepage kills IE10. http://imm.io/aWqT 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 :(

      • http://leaverou.me Lea Verou

        Woah, thx. Is the crash reproducible every time?

        • http://twitter.com/suprMax 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 ;)  http://jsfiddle.net/molokoloco/aqfsC/show/ 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

    • http://leaverou.me Lea Verou

      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

  • http://twitter.com/higgo85 David Higgins

    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.

    -David

    • http://leaverou.me Lea Verou

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

  • http://twitter.com/omargomez Omar Gomez

    I just tested it on Android. Amazing!

  • Pingback: Linkfutter 10 « F-LOG-GE

  • http://twitter.com/greenido Ido Green

    Great examples… thanks! :)

  • http://twitter.com/alexanderchalk Alexander Chalkidis

    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

      DAN!

      You tie the animation to events in jQuery.

    • http://leaverou.me Lea Verou

      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!

  • http://beben-koben.myopenid.com/ Beben Koben

    thank you for creativity ♥ ☺

  • http://twitter.com/pazguille Guillote Paz

    Thanks for share! :D

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

  • Pingback: g | Working Draft

  • http://twitter.com/fesebuv Felipe Buenaño

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

  • Pingback: Animatable | saviomd.com/blog

  • http://twitter.com/simonowendesign simon owen

    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!

    • http://leaverou.me Lea Verou

      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

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

    • http://leaverou.me Lea Verou

      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.

  • http://twitter.com/VapingSam Samuel Munro

    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.

    • http://leaverou.me Lea Verou

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

  • http://www.thoughtresults.com Saeed Neamati

    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.

  • http://bacsoftwareconsulting.com/blog/ Boutros AbiChedid

    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.

    • http://leaverou.me Lea Verou

      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.

      • http://twitter.com/VapingSam Samuel Munro

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

        • http://leaverou.me Lea Verou

          CSS transitions & animations are not supported by IE9.

        • telfire

          Yes they are, just not 3d.

        • http://lea.verou.me/ Lea Verou

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

  • http://beben-koben.myopenid.com/ Beben Koben

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

    • http://leaverou.me Lea Verou

      Somebody commented in the wrong thread, and it ain’t me :P

  • http://www.wonderwhy-er.com wonderwhy-er

    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!!

  • http://www.virtualidstudios.com David

    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.

    Cheers!

    • http://leaverou.me Lea Verou

      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).

  • http://twitter.com/hectorgarrofe Héctor Garrofé

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

  • http://twitter.com/hectorgarrofe Héctor Garrofé

    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.

  • http://twitter.com/JWChiwa Joseph Wachira

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

  • http://twitter.com/witch_twitt Jenna Marie

    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.

    • http://leaverou.me Lea Verou

      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?
    Thanks

  • 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