jQuery Animated DOM Elements with CSS3 Transitions - CSSAnimate

jquery.mb.CSSAnimate is a jQuery plugin for animated DOM Elements using CSS3 transition instead of the default jQuery.animate method. It provides a fallback to the default animate method if CSS3 is not supported by the browser. 

Basic Usage:

1. Include jQuery library and jQuery CSSAnimate in the head section of your web page

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="inc/jquery.mb.CSSAnimate.js"></script>

2. Create the html

<div class="test">
<div class="test one"></div>
<div class="test two"></div>
<div class="test three"></div>
<div class="test one"></div>
<div class="test two"></div>
<div class="test three"></div>
<div class="test one"></div>
<div class="test two"></div>
<div class="test three"></div>
<div class="test one"></div>
<div class="test two"></div>
<div class="test three"></div>
</div>

3. The CSS

.test {
top: 0;
left: 0;
position: absolute;
width: 10px;
height: 10px;
background: #fff;
box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
border-radius: 10px;
box-sizing: border-box;
-webkit-backface-visibility: hidden; /* Chrome and Safari */
-moz-backface-visibility: hidden; /* Firefox */
-ms-backface-visibility: hidden; /* Internet Explorer */
backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

4. The javascript

 $.fn.test = function() {
var cH = $(window).height();
var cW = $(window).width();
return this.each(function() {
var el = $(this);
var w = 30 * (Math.random() * 15);
var h = 30 * (Math.random() * 15);
var t = Math.floor(Math.random() * (cH-h));
var l = Math.floor(Math.random() * (cW-w));
var r = Math.floor(Math.random() * 360);
var duration = 1000 + (Math.random() * 3000);
//here is the CSSAnimate :-)
el.CSSAnimate({
top: t,
left: l,
width: w,
height: h,
"border-radius":Math.floor(Math.random() * 100),
"transform":"rotate("+r+"deg)",
"transform-origin":"50% 50%",
"background":"rgba("+Math.floor(Math.random() * 255)+","+Math.floor(Math.random() * 255)+","+Math.floor(Math.random() * 255)+","+(.6+Math.random()*.4)+")"
}, duration, "ease-out", function() {
el.test();
})
})
};
$(".test").test();

Change logs:

2017-11-30

• various fix

2016-12-17

• various fix

2014-09-24

• better CSS3 interpreter

2014-03-27

• better CSS3 interpreter

2014-02-19

• various fixes.

This awesome jQuery plugin is developed by pupunzi. For more Advanced Usages, please check the demo page or visit the official website.