When using CSS transitions / animations / etc., What is the best way to return to jquery if the user browser does not perform css animation?

Question

I am looking for a way to use css animations, but if the user browser doesn’t do css animations, then to return to using jQuery for animations. Is there an easy way to do this in jQuery? the plugin would be OKAY if it were a small plugin, but I was really looking for a way to do this in jquery, if possible. The only reason I want to use css animation is the much lower processor power used when using css animation.

Answer 1

jQuery enhanced animation plugin uses CSS transitions without having to write custom code for browsers with transition support

The alternative is not very happy: you can add a function detection library, such as Modernizr, and then write specific code for each case, for example ...

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. Animations are not vital. If you make progressive improvement, each user will get the best experience that their browser allows them :).

If you care so much about this “processor power”, you don’t want animation in IE at all. Otherwise, use only jQuery, which is best suited to your specific needs.

Answer 3

jQuery recommends using jQuery.support to make sure some features are supported by the browser. How:

 jQuery.support.opacity //returns true/false 

Core jQuery does not allow you to check CSS3 properties, but plugins. You can find some of these plugins in the comments after the function description (for example, this one )