Animate.css - a bunch of plug-and-play CSS animations

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.

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

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

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

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!

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/