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
}