Create animation for Css3 2D-transforms. Available transforms includes: rotate / translate / scale
Margin is used to handle offset in CSS2. BE CALEFUL to change them after applying transform in this case.
Sample: http://www.rendxx.com/Lib/Sample/12
Download: AnimateTo v0.2.3
Download the package from bower
bower install animateTo--save
Including the file in your webpage
<script type="text/javascript" src="/node_modules/animateTo/js/AnimateTo.js"></script>
JavaScript:
$("#sample").animateTo({ rotate: "-=90" }, 1000, 'easeInOutQuart', null);
$("#sample").animateTo({ scaleX: "+=0.2", scaleY: "+=0.2" }, 500);
$("#sample").animateTo({
transform: {
rotate: 0,
scaleX: 1,
scaleY: 1,
translateX: 0,
translateY: 0
},
duration: 700,
onComplete: function () {
msg.text("RESET!");
}
});
Chrome
Fire Fox
Safari
Edge
IE 9-11
IE 7,8
Copyright © 2015, Rendxx. (MIT License)
See LICENSE for more info.