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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="test" id="test-0" onmouseenter="$('.box',this).CSSAnimate({x:-50, y:-30})" onmouseleave="$('.box',this).CSSAnimate({x:0, y:0})"> <h3>A Demo of Translate</h3> <div class="area"> <div class="ghost"></div> <div class="box"></div> </div> <pre class="code">.CSSAnimate({ x: 50, y: 30 });</pre> </div> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<div class="elements"> <div class="ani-demo-test one"></div> <div class="ani-demo-test two"></div> <div class="ani-demo-test three"></div> <div class="ani-demo-test one"></div> <div class="ani-demo-test two"></div> <div class="ani-demo-test three"></div> <div class="ani-demo-test one"></div> <div class="ani-demo-test two"></div> <div class="ani-demo-test three"></div> </div> |
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.