jQuery.mb.CSSAnimate – Use CSS3 transition to animate DOM Elements via jQuery

As most of you know there are new features in CSS3 that let you animate HTML elements using just CSS.

Using CSS3 “transition” you can control which property to apply, the duration of the transition, the transition timing and the transition delay.
The transition considers also the “transform” parameter specified in the CSS class.

Actually jQuery .animate() method doesn’t consider the CSS3 support and it applies the animation using javascript.

That’s why I realized the mb.CSSAnimate() simple method that uses CSS3 instead of javascript to animate HTML elements; it provides a callback function fired once the transition ends as jquery.animate() does and it fallback to jquery.anomate() if “transition” is not supported by the browser.

Why should we consider to use CSS3 instead of javascript to animate HTML elements?

Well… First CSS3 animation use less CPU than javascript; the UX is smoothness (especially on mobile devices); on iOs is hardware accelerated; you can animate also background color, rotation, scale, skew or any of the CSS properties available that the default .animate() method doesn’t provide.

What happens if the browser doesn’t support CSS3 using mb.CSSAnimate()?

Actually the mb.CSSAnimate() method has a fallback to the jquery.animate() one; of course if you were animating a “transform: rotate()” property you’ll lose it :-).

How can I use specific prefixed CSS property with mb.CSSAnimate()?

To use specific browsers property with mb.CSSAnimate you just need to remove the prefix from the property.
For example if you want to animate the “-webkit-transform: rotare(180deg); -moz-transform: rotare(180deg); -o-transform: rotare(180deg); -ms-transform: rotare(180deg)” property here is how you should call the method:

$(myObj).CSSAnimate({"transform": "rotate(180deg)"},1500,"ease-out", "all", callback);

 

Some useful links:

When can I use CSS3 Transitions?: http://caniuse.com/css-transitions;
MDN transition: https://developer.mozilla.org/en/CSS/transition
CSS 3 Transitions: http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/
Understanding CSS3 Transitions: http://www.alistapart.com/articles/understanding-css3-transitions/

Take a look at the demo:
http://pupunzi.github.com/jquery.mb.CSSAnimate/demo.html

Download: jquery.mb.CSSAnimate

I’ll add documentation and a component page soon.