JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://meodai.ch/alainbenoit/js/libs/modernizr-1.6.min.js"></script>
<div>
</div>
CSS
div {
width: 300px;
height: 300px;
background: green;
-webkit-transition: all 2s ease-in;
-moz-transition: all 2s ease-in;
-o-transition: all 2s ease-in;
transition: all 2s ease-in;
}
JavaScript
/*
* jQuery.css3animate.js v.0.21 by David Aerne ( meodai.ch )
* free to use and/or modify not protected by any kind of lisence.
* Last modification: 2011-3-28
*
* Animates with CSS3 Transition if possible
* usage: .css3animate([ css object ], speed, callback);
*
* Depends on: modernizer.js && jQuery
*
* Special thanks to backflip & Stackoverflow.
*/
(function($, undefined) {
//global plugin variables
var settings, browserPrefix, animation, transitionEndEvent, $fnStop, $animatedSelector;
//default settings
settings = {
"speed": 500,
"browsers": {
"webkit": {
"prefix": "-webkit-",
"endEvent": "webkitTransitionEnd"
},
"mozilla": {
"prefix": "-moz-",
"endEvent": "transitionend"
},
"opera": {
"prefix": "-o-",
"endEvent": "oTransitionEnd"
},
"msie": {
"prefix": "-ms-",
"endEvent": "TransitionEnd"
},
"fallback": {
"prefix": "",
"endEvent": "transitionend"
}
}
};
//determine browser prefix and transitionEndEvent
if ($.browser.webkit) {
browserPrefix = settings.browsers.webkit.prefix;
transitionEndEvent = settings.browsers.webkit.endEvent;
} else if ($.browser.msie) {
browserPrefix = settings.browsers.msie.prefix;
transitionEndEvent = settings.browsers.msie.endEvent;
} else if ($.browser.mozilla) {
browserPrefix = settings.browsers.mozilla.prefix;
transitionEndEvent = settings.browsers.mozilla.endEvent;
} else if ($.browser.opera) {
browserPrefix = settings.browsers.opera.prefix;
transitionEndEvent = settings.browsers.opera.endEvent;
} else {
browserPrefix = settings.browsers.fallback.prefix;
transitionEndEvent =...