Animatable: A CSS transitions gallery

Posted on October 30, 2011 by Lea Verou

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

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

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