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

by tilt • 15 years ago

166 28 15 years ago

james333• 15 years ago

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

johnyzee• 15 years ago

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.

ceejayoz4• 15 years ago

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.

james333• 15 years ago

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.

vinhboy• 15 years ago

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.

thetannedman• 15 years ago

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.

_dte8• 15 years ago

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

james333• 15 years ago

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.

_dte8• 15 years ago

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

crisedward2• 15 years ago

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

_dte8• 15 years ago

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

crisedward2• 15 years ago

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

nchuhoai• 15 years ago

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

_dte8• 15 years ago

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

damncabbage• 15 years ago

Thanks! (You are amazing.)

ehynds• 15 years ago

http://playground.benbarnett.net/jquery-animate-enhanced/

skizm• 15 years ago

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

ceejayoz4• 15 years ago

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

equark• 15 years ago

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.

_dte8• 15 years ago

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.

ceejayoz4• 15 years ago

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

Void_• 15 years ago

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

recursive• 15 years ago

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

_dte8• 15 years ago

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.

svanhess• 15 years ago

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.

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

Related Stories