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