

Animate.css - a bunch of plug-and-play CSS animations - tilt
https://github.com/daneden/animate.css

======
vinhboy
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
@_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.

~~~
james33
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.

~~~
_dte
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!)

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

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

~~~
damncabbage
Thanks! (You are amazing.)

~~~
_dte
You too, Mr Cabbage.

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

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

~~~
_dte
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.

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

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

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

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

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

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

~~~
johnyzee
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.

~~~
ceejayoz
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.

~~~
_dte
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'.

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

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

------
recursive
> 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/>

~~~
_dte
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.

