Scale, Skew, Rotate, Translate CSS 3 animations with jQuery

Create CSS3 animations in DOM element

The CSSAnimate.js is a small jQuery plug-in for creating the animations by using the CSS3 transitions. You may create different types of animations like skew, scale, rotate etc. in DOM elements.

If CSS3 is not supported by the browser then it will provide the fallback to the default animate method of jQuery.

Demo1 Demo2

Developer page Download plug-in

How to use the CSSAnimate plug-in?

After downloading the package, include the CSSAnimate.js file after jQuery:

 <script type=”text/javascript” src=”js/CSSAnimate/jquery.mb.CSSAnimate.js”></script>

Make sure placing this line after the jQuery library.

Use the markup, CSS3 and call the plug-in as shown in the demos below.

A demo of scale, skew, rotate and translate animations

In this example, the translate, skew, rotate and scale animations are created. In the wrapper element, the values for data attributes onmouseenter and onmouseleave are provided. See the complete code and output by clicking the link or image below:

See online demo and code

An example markup for translate:

See the complete code and all animation on the demo page.

Creating full page animations that float around the page

See another demo where different elements float around the page. This can be the interesting demonstration for animating without using the flash or other heavy solutions. See the animation and code on the demo page:

See online demo and code

The markup:

See how the math formula is used in the JavaScript for creating that continuous animation. Read more about this plug-in by its maker by following the link in above part.