fastAnim()

CSS animations have been around for a while and, since you simply define a start and end point instead of changing CSS settings every X seconds, can be hardware accelerated and run much smoother than their JavaScript counterparts. The difference is quite noticeable.

Why not use them by default? Well, as always, there is IE, which will only support CSS3 animations in version 10. You could wait until every IE user upgrades, or use them right now coding a fall back in JavaScript. Of course, doing the same thing twice is quite annoying, specially when it's a lot more than twice. Since transitions have not been completely standardized yet, you have to use vendor prefixes for every single render engine out there.

I was quite exited to find some plugins that aim to replace jQuery animations with CSS3 where available. Unfortunately, they weren't as reliable as a drop in replacement as I expected. I hope jQuery eventually ends up doing this natively: simply upgrading the library would make a lot of animations on the web faster.

Until this happens, I've been using this function more and more; it's hard to go back to choppy animations. The idea is very simple, check if the browser is capable and pass the variables accordingly. And while we are at it, set some reasonable defaults.

So first use Modernizr to find it the browser supports it:

if (!Modernizr.csstransitions) { lameBrowser = "yes" } 

Or if you are lazy or have issues with Modernizr, just target everything that's less than IE 10. Most people on other browsers tend to have very recent versions.

The actual function:

function fastAnim(selector, x, y, duration, opacity) {
        duration = (duration||0.3);
        opacity = (opacity||1);
        y = (y||"0px");

        if (typeof lameBrowser !== "undefined") {
            duration = duration * 1000;
            $(selector).animate({left: x, top: y, opacity: opacity}, duration);
        } else {
            $(selector).css({
                    "-webkit-transition" : "all " + duration + "s ease-in-out",
                    "-webkit-transform" : "translate(" + x + "," + y +")",
                    "-moz-transition" : "all " + duration + "s ease-in-out",
                    "-moz-transform" : "translate(" + x + "," + y +")",
                    "-ms-transform" : "translate(" + x + "," + y +")",
                    "-ms-transition" : "all " + duration + "s ease-in-out",
                    "-o-transform" : "translate(" + x + "," + y +")",
                    "-o-transition" : "all " + duration + "s ease-in-out",
                    "transition" : "all " + duration + "s ease-in-out",
                    "transform" : "translate(" + x + "," + y +")",
                    "opacity" : opacity
                    });
        }
    }

This way you can type:

fastAnim("#myDiv", "100px")

and it will do the right thing, moving #mydiv 100px to the left in 0.3 sec using CSS3 when possible and JavaScript when not. It's also faster to type too: to move an element 100px horizontally, 50px vertically and dropping its opacity to 50% during one second is:

fastAnim("#myDiv", "100px", "50px", "1", "0.5");
       vs
$("#myDiv").animate({ "left" : "100px", "top" : "50px", "opacity" : "0.5" }, 1000);