Awesome stuff. My only gripe is that the other day I ran into one of these CSS-powered animation on an item I was debugging. I thought it was JS, so I was inspecting the DOM looking for the usual yellow highlighting when JS executes on a DOM. It never happened. It made me scratch my head for a while. Maybe they/we/I should put something in the webkit inspector to indicate a css animation action.

@_dte here (the author)

vihnboy - a debugger for CSS animations would be great. Luckily, the webkit inspector will tell you all the CSS properties an element carries and indicates CSS errors. However, it doesn't show you errors with associated keyframes - that would be awesome.

james33, johnyzee - the tech is pretty well supported, but indeed has a long way to go. It's in the css3 spec, which is great, and IE10 will support it. Remember - it's an extra layer of interaction, not an important feature of any website. use it subtly.

It may be an extra layer of interaction for a regular website, but if you are doing something entirely different like native browser games, it becomes more essential.

true, but as I've said here and on the site, the animations featured in the library are meant for interaction. I agree that until this tech evolves, games etc are better suited to Javascript animation (or even flash - or just let them stay in advanced languages and dedicated platforms!)

I wish there was a library that has a fallback included. I really like the new CSS transitions but as noted, for many use cases there is not a big enough marketshare of supported browsers. But maintaining the CSS3, Jquery animation and the logic behind it, just seems nasty compared to plain jquery animations

A js/jquery plugin/fallback is in the works.

Thanks! (You are amazing.)

You too, Mr Cabbage.

Great plugin! You should change your demo to use something like

$('#animateTest').removeClass().hide().show().addClass('flash');

So that the same animation can be called multiple times in a row.

So are most browser animations done with javascript or css? Seems like from vinhboy's comment most are done in javascript.

I know there are a ton of advantages to using css for animation, so why do most people use javascript? Easier to code?

Oh and btw, this is awesome. I will definitely be using some of these animations in the future. Thanks :)

The benefits of CSS animations are plenty. Unfortunately, support is still very scarce: the Webkit team brought the animation property to the CSS3 specification. Mozilla have only very recently added support in Firefox.

however, both Microsoft and Opera have announced support in their upcoming releases.

In my opinion, CSS animation are much easier to write than Javascript animations, and don't require external libraries such as jQuery.

At this point I'm not sure most web developers consider jQuery an external library. Heh.

For many things it's not hard to get 60 frames per second with javascript and you have tremendous flexibility that is hard to replicate css, in my experience. For instance, I had a hard time synchronizing all my css animations but found it easy enough in javascript.

No IE support and Mozilla's is still in infancy. They only work nicely in Webkit at the moment, so JavaScript it is.

Nice work! have you tried using Sass & Compass for doing it more configurable, with it you can use variables and "functions"

I prefer vanilla CSS, but if that's something you'd like to see, why not fork it and make your own?

you are right! ill fork it!, btw tried it on iphone and works, it will make a good combination with sencha touch :D

Looks decent although I don't understand why they used a deceleration equation on the Fading exits. I would think emphasis should be in the start of the animation instead of the end. A simple acceleration equation would easily fix this.

I can't wait until the supported browsers are ubiquitous enough to use these exclusively. The animations on the demo page look great!

Which technologies does this use that are not ubiquitous? Without seeing the examples, I can't think of anything that couldn't be done with canvas + js and would work in practically every browser. Of course that wouldn't be 'pure' CSS but I can't see a reason to insist on that either.

I'm stuck with Firefox 3.6 on this workstation but it does most of HTML5 just fine so being 'unsupported' for some animation is a surprise.

CSS animations like this are proposed in CSS3 but only heavily implemented in Webkit at the moment. Mozilla has some support, IE is entirely and unsurprisingly lacking.

true - Webkit is the only browser with full support at the moment. Apple/Webkit team were the ones to bring it to the spec.

Mozilla added support recently, and support has been promised in IE10 and the next Opera release. To me, that spells 'web standard'.

"Publication as a Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress." - http://www.w3.org/TR/css3-animations/

Lots of things get promised in IE that don't wind up being very complete, and it'll be quite some time until the IE7/8/9ers fade away.

Right, you can do all of it in JS/Canvas, but hardware acceleration support is lacking. From my understanding, these CSS animations have full hardware acceleration, but like ceejayoz said, only some of the latest browsers have full support at the moment.

Nice! Feels like when we first tried JavaScript animations and were all excited about it.

> Hmm... looks like you're using a browser that doesn't support CSS animations. You should go get one in order to use this cool stuff.

Yes it does.

http://www.opera.com/docs/specs/presto23/css/transitions/

Those are CSS3 transitions (a 'tween' between two states, such as a hover event), not animations.

Animation support is coming in the next release of Opera.