Smooth.js - jQuery plugin for CSS3 transitions with downgrade to $ .animate

CSS3 transits are damn useful. Compared to javascript animation, they are:

1. Provide smoother transitions;
2. Consume less resources;
3. Open up new opportunities. For example, automatic processing of matrix transformations (CSS-transforms);

Of course, our beloved IE with them does not support them even in version 9.

The logical solution would be in the case of IE to perform the animation in the traditional way, for example through $ .animate. I suggest in such cases to use the plugin Smooth.js , which will do it for you.

Syntax

The syntax is extremely simple and as close as possible to jQuery.animate:

$("#subject).smooth({ width: "40px", transform: "rotate(-45deg)", background: "#cbf" }, { duration: 2000, easing: "swing" }); 

')
The first parameter is the list of properties for the animation, the second is the animation settings. In the settings, while only duration (duration in ms) and easing (the name of the smoothing function).

Sequential animation

The function returns the $ .Deferred () object, so that you can easily perform several animations sequentially:

 $("#subject).smooth({ width: "40px" }).done(function() { $("#subject).smooth({ transform: "rotate(-45deg)", )); 

Modes of operation

The plugin can work in one of two modes - “css” and 'jquery ". When initializing, it tries to set the mode to css, in the case of using ie - to" jquery ". You can set the mode manually at any time:

  $.fn.smooth.configure({ mode: "jquery" }); 

Conclusion

Read more about transits here.
I would be grateful for the feedback on the plugin.