When using CSS transitions/animations/etc., what's the best way to fall back to jquery if the users browser doesn't do css animations?

Question

I'm looking for a way to use css animations, but if the users browser doesn't do css animations - to then fall back to use Jquery for the animation. Is there an easy way to do this in Jquery? a plugin would be OKAY, if it were a small plugin, but i'm really looking for some way of doing this in jquery if possible. The only reason I want to use css animations is because of the much lower Processor power used when using css animations.

Answer 1

The jQuery animate enhanced plugin uses CSS transitions without having to write specific code for transition capable browsers

The alternative is not very encouraging: you could add a feature detection library such as Modernizr and then write specific code for every case, such as...

if (Modernizr.csstransitions) {
  $("#yourdiv").css({
    "-webkit-transform" : "translate(0, 10)",
    "-o-transform" : "translate(0, 10)",
    "-moz-transform" : "translate(0, 10)",
    "-ms-transform" : "translate(0, 10)",
    "transform" : "translate(0, 10)"
});
}
else {
  //do jquery animate stuff
}

Answer 2

You should not care about it. Animations are not vital. If you do progressive enhancement, every user will get the best experience their browser lets them to have :).

If you care about that "processor power" so much, you do not want to have animations on IE at all. Otherwise, use just jQuery, that seems to be best for your particular needs.

Answer 3

jQuery recommends to use jQuery.support to make sure that some functionality in maintained by browser. Like:

jQuery.support.opacity //returns true/false

Core jQuery doesn't give way to test CSS3 properties, but plugins do. You can find some of such plugins in the comments after function description (like this one )