之前在做HTML5移动端开发的时候，用的都是Animate.css
http://greensock.com/timelinemax
下面我们直奔主题，开始介绍TweenMax动画库：
1、如何引用TweenMax动画库
1 <script src="./../js/jquery-2.1.4.min.js"></script> 2 <script src="./../js/TweenMax.js"></script>
1 <script> 2 $(function () { 3 var t = new TimelineMax(); 4 }); 5 </script>t.to("元素选择器或对象",持续时间,对象,【可选】动画延迟发生时间可写数字,"-=0.5","+=0.5") 1 <style> 2 html,body{ 3 margin: 0; 4 padding: 0; 5 } 6 #div1{ 7 width:100px; 8 height:100px; 9 background: #8D121A; 10 position: absolute; 11 left:0; 12 top:100px; 13 } 14 </style>1 <script> 2 $(function(){ 3 var t =new TimelineMax(); 4 t.to("#div1",1,{left:300},1); 5 }); 6 </script>执行组合动画
1 <script> 2 t.to("#div1", 1, { left: 300 }); 3 t.to("#div1", 1, { width: 300 }); 4 t.to("#div1", 1, { height: 300 }); 5 t.to("#div1", 1, { top: 300 }); 6 t.to("#div1", 1, { rotationZ: 180 }); 7 t.to("#div1", 1, { opacity: 0 }); 8 </script>1 <script> 2 //动画延迟一秒执行 3 t.to("#div1", 1, { left: 300, width: 300 }, 1); 4 //第二条动画没有延迟时间,所以等第一条动画执行完成后立刻执行第二条动画 5 t.to("#div1", 1, { width: 300 }); 6 </script>1 <script> 2 //动画延迟一秒执行 3 t.to("#div1", 1, { left: 300, width: 300 }, 1); 4 //第二条动画也是延迟一秒执行,会和第一条动画同时延迟一秒执行 5 t.to("#div1", 1, { width: 300 }, 1); 6 </script>1 <script> 2 //动画延迟一秒执行 3 t.to("#div1", 1, { left: 300, width: 300 }, 1); 4 //实现第一条动画完成后,延迟一秒,执行第二条动画 5 t.to("#div1", 1, { width: 300 }, 3); 6 </script>1 <script> 2 //动画延迟一秒执行 3 t.to("#div1", 1, { left: 300, width: 300 }, 1); 4 t.to("#div1", 1, { width: 300 }, "+=1"); 5 </script>1 <script> 2 //动画延迟一秒执行 3 t.to("#div1", 1, { left: 300, width: 300 }, 1); 4 //第四个参数设0后,动画会立刻执行 5 t.to("#div1", 1, { width: 300 }, 0); 6 </script>文章来源: TweenMax动画库学习