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.

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.

• javascript
• jquery
• css
• css-transitions

Share Improve this question Follow edited Jul 28, 2012 at 18:51 Rich Bradshaw 73.1k4646 gold badges188188 silver badges241241 bronze badges asked Apr 10, 2011 at 14:19 android.nickandroid.nick 11.2k2424 gold badges7979 silver badges112112 bronze badges 1

• 2 Don't forget the fallback's fallback (if JavaScript is disabled) :P – Shaz Commented Apr 10, 2011 at 14:29

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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
}

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.

jQuery remends 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 ments after function description (like this one )