前端制作动画的几种方式（css3，js，jquery）
制作动态的网页是是前端工程师必备的技能，很好的实现动画能够极大的提高用户体验，增强交互效果，那么动画有多少实现方式，一直对此有选择恐惧症的我就总结一下，以便在开发的时候选择最好的实现方式。
1.css的transition。
语法：
#mydiv2{width:100px;transition: width 2s;/*transition-property 规定设置过渡效果的 CSS 属性的名称transition-duration 规定完成过渡效果需要多少秒或毫秒transition-timing-function 规定速度效果的速度曲线。 1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)6、cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。*/-moz-transition: width 2s; /* Firefox 4 */-webkit-transition: width 2s; /* Safari 和 Chrome */-o-transition: width 2s; /* Opera */}
transition-property是用来指定当元素其中一个属性改变时执行transition效果，其主要有以下几个值：none(没有属性改变)；all（所有属性改变）这个也是其默认值；indent（元素属性名）。当其值为none时，transition马上停止执行，当指定为all时，则元素产生任何属性值变化时都将执行transition效果。
indent是可以指定元素的某一个属性值。其对应的类型如下：
1、color: 通过红、绿、蓝和透明度组件变换（每个数值处理）如：background-color,border-color,color,outline-color等css属性；
2、length: 真实的数字 如：word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,background-position等属性；
3、percentage:真实的数字 如：word-spacing,width,vertical-align,top,right,bottom,left,min-width,min-height,max-width,max-height,line-height,height,background-position等属性；
4、integer离散步骤（整个数字），在真实的数字空间，以及使用floor()转换为整数时发生 如：outline-offset,z-index等属性；
5、number真实的（浮点型）数值，如：zoom,opacity,font-weight,等属性；
6、transform list:详情请参阅：《CSS3 Transform》
7、rectangle:通过x, y, width 和 height（转为数值）变换，如：crop
8、visibility: 离散步骤，在0到1数字范围之内，0表示“隐藏”，1表示完全“显示”,如：visibility
9、shadow: 作用于color, x, y 和 blur（模糊）属性,如：text-shadow
10、gradient: 通过每次停止时的位置和颜色进行变化。它们必须有相同的类型（放射状的或是线性的）和相同的停止数值以便执行动画,如：background-image
11、paint server (SVG): 只支持下面的情况：从gradient到gradient以及color到color，然后工作与上面类似
12、space-separated list of above:如果列表有相同的项目数值，则列表每一项按照上面的规则进行变化，否则无变化
13、a shorthand property: 如果缩写的所有部分都可以实现动画，则会像所有单个属性变化一样变化
具体什么css属性可以实现transition效果，在W3C官网中列出了所有可以实现transition效果的CSS属性值以及值的类型，大家可以点这里了解详情。这里需要提醒一点是，并不是什么属性改变都会触发transition动作效果，比如页面的自适应宽度，当浏览器改变宽度时，并不会触发transition的效果。但上述表格所示的属性类型改变都会触发一个transition动作效果。
2.css3的animation属性
@keyframes定义动画
@keyframes myfirst1{from {background: red;}to {background: yellow;}}@-moz-keyframes myfirst2 /* Firefox */{from {background: red;}to {background: yellow;}}@-webkit-keyframes myfirst3 /* Safari 和 Chrome */{from {background: red;}to {background: yellow;}}@-o-keyframes myfirst4 /* Opera */{from {background: red;}to {background: yellow;}}/* 动画过程可以更加细腻，变量可更加丰富 */@keyframes myfirst5{0% {background: red; left:0px; top:0px;} /*改变位置要求position不能为static*/25% {background: yellow; left:200px; top:0px;}50% {background: blue; left:200px; top:200px;}75% {background: green; left:0px; top:200px;}100% {background: red; left:0px; top:0px;}}
将动画绑定到元素上
#mydiv2{animation-name: myfirst5; /*规定 @keyframes 动画的名称。*/animation-duration: 5s; /*规定动画完成一个周期所花费的秒或毫秒。默认是 0。*/animation-timing-function: linear; /*规定动画的速度曲线。默认是 "ease"。*/animation-delay: 2s; /*规定动画何时开始。默认是 0。*/animation-iteration-count: infinite; /*规定动画被播放的次数。默认是 1。*/animation-direction: alternate; /*规定动画是否在下一周期逆向地播放。默认是 "normal"。*/animation-play-state: running; /*规定动画是否正在运行或暂停。默认是 "running"。*//* Firefox:-moz-animation-name: myfirst;-moz-animation-duration: 5s;-moz-animation-timing-function: linear;-moz-animation-delay: 2s;-moz-animation-iteration-count: infinite;-moz-animation-direction: alternate;-moz-animation-play-state: running;*//* Safari 和 Chrome:-webkit-animation-name: myfirst;-webkit-animation-duration: 5s;-webkit-animation-timing-function: linear;-webkit-animation-delay: 2s;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: alternate;-webkit-animation-play-state: running;*//* Opera:-o-animation-name: myfirst;-o-animation-duration: 5s;-o-animation-timing-function: linear;-o-animation-delay: 2s;-o-animation-iteration-count: infinite;-o-animation-direction: alternate;-o-animation-play-state: running;*/}
动画属性简写
#div5{animation: myfirst 5s linear 2s infinite alternate;/* Firefox: */-moz-animation: myfirst 5s linear 2s infinite alternate;/* Safari 和 Chrome: */-webkit-animation: myfirst 5s linear 2s infinite alternate;/* Opera: */-o-animation: myfirst 5s linear 2s infinite alternate;}
3.Jquery的animate函数
隐藏显示 hide/show(speed,callback),
$cr.hide(); //元素隐藏，会记住diaplay原始属性$cr.css("display","none"); //元素隐藏，忘记diaplay原始属性$cr.show(); //元素显示，回复diaplay原始属性$cr.hide('slow'); //缩小到左上角，传递字符串型参数 'slow'600ms，'fast'200ms,'normal'400ms。没有参数表示立即实现$cr.show(1000,function(){ //从左上角开始放大，传递整型参数，和回调函数alert("显示结束");});$cr.toggle(); //改变元素可见性动画
淡入淡出 fadeIn/fadeOut(speed,easing,callback),
$cr.fadeOut('slow',"swing"); //元素淡出 "swing" - 在开头/结尾移动慢，在中间移动快,"linear" - 匀速移动$cr.fadeIn(); //元素淡入，在元素消失下情况下有效$cr.fadeTo(600,0.2);//改变元素不透明度动画，参数为时间和透蜜蒙都$cr.fadeToggle(); //改变元素不透明度，实现元素可见性动画
滑动 slideUp/slideDown(speed,callback)会改变元素的display属性
$cr.slideUp();//缩小到所上角$cr.slideDown(); //由左上角扩大$cr.slideToggle();//改变元素消失或出现
自定义动画 animate({params},speed,callback);
if(!$cr.is(":animated")){ //判断元素是否处于动画状态$cr.animate({ //一个animate内的动画为并行left:'250px',//position属性必须设置成relative或absoluteheight:'+=150px',//可以使用相对值+=或-=width:'toggle' //可以把属性的动画值设置为 "show"、"hide" 或 "toggle"。opacity:'show'表示fadeIn， height:'show'表示slideDown，在属性上设置show表示出现},'slow',function(){alert("动画执行完成");}).delay(1000)//延迟时间，使用链式写法.animate({fontSize:'3em'},"slow"); //多个animate之间是顺序执行的}else{//停止动画 stop(stopAll,goToEnd); stopAll表示是否清除后续所有动画，默认false，goToEnd表示当前动画是否立即执行完成，默认为false。$cr.stop(); // 不带参数，会清除在被选元素上指定的当前动画}
但是，animate函数只能够实现一些数值属性，能够实现的变化非常有限制，而且使用这个函数时还要配合stop来使用，在达到某条件时终止动画，设置比较复杂。
4.原生js动画
原生js动画利用js代码，将动画一步以函数的方式写出来，可以实现多种动画样式，而且可以自己做兼容性处理，自己设立每一步的动画效果，并且能够完成比较复杂的效果，但是代码量很大。如下面的例子：需要自己定义所有的动态函数，并进行计算、判断和处理
var startingTop=0;var dom = document.getElementById("mydiv");var animation = setInterval(function() {//设置周期实现元素样式变化，进而实现动画startingTop += 20;dom.style.top = startingTop+"px"; //要求position不能为static，可以在style中设置position:absolute; //dom.style.opacity}, 100);clearInterval(animation);//清除周期事件//js设置显示属性的几种方法//dom.style.cssText = "margin-top:50px"//dom.className = "class2";//dom.setAttribute("class", "class2");//dom.setAttribute("title","mytitle");
5.插件
网上可以搜到很多封装好的动画插件，这些插件可以直接引入到页面中，通过初试话和配置的方式进行设定，直接在页面中展示动画。
如：waves，textillate.js等等。
6.使用canvas制作动画
我们还可以使用canvas在浏览器上画图，并且利用其api，制作动画。canvas使用的地方非常多，尤其是在制作h5小游戏上。
同样都是使用编码的方式由前端开发工程师完成动画效果，canvas要比原生js效率高的多，流畅的多。通过画笔的方式，能够轻松的实现更多的动画效果。
7.引用gif图片
如果在需求特别紧急，而且动画又特别复杂的情况下，自己没有把握按时实现效果，或者代价太大，真的，别犹豫，上gif图片吧，不要在技术上纠结了，虽然在工程师的角度上这样做很low，但是，用户的体验是没有影响的~所以，别纠结，就是要快！完成最重要了！
