关于动画实现的几种方式，学习总结摘抄与分享；

在前端开发的过程中，经常会遇到一些动画的功能要实现，使得页面看上去更酷炫，更抓人眼球一点；当然很多是用框架里面封装好的方法可以直接套用，下面是个人学习与总结几种实现动画实现的方法，仅供参考；

第一种，css3中的transition属性：
transition是一种简写方式，类似于background；
transition可以设置四个过度属性：
transition-property: 用于控制css样式，默认是all（全部样式）；
transition-duration: 用于控制动画实现的时间；
transition-timing-function: 用于控制在时间内效果展示的方式（速度曲线），linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)共这六种方式；
transition-delay：用于控制动画从什么时候开始；

第二种，css3中的animation，这种实现方式与上一种差不多，但是内容要多一点，当然控制的也多了一些；
共有六种控制属性：
animation-name： 定义一个关键帧动画名；
animation-duration：同上
animation-timing-function： 同上
animation-delay： 同上
animation-iteration-count： 执行动画的次数
animation-direction： 规定是否轮流反向播放动画
下面是一个实例：
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /Safari and Chrome/
}
div{
width: 200px;
height: 200px;
background: red;
position: relative;
animation: mymove 5s infinite;
-webkit-animation: mymove 5s infinite; /Safari and Chrome/
}
@keyframes mymove
{
1% {left:0px;}
20%{left:200px;}
50% {left:300px;}
100%{left:200px;}
}

	@-webkit-keyframes mymove /*Safari and Chrome*/
	{
		1% {left:0px;}
	    20%{left:200px;}
	    50% {left:300px;}
	    100%{left:200px;}
	}
	</style>

第三种，Jquery的animation方法：
$(selector).animation(styles, options);
styles: css产生的样式和值；
options={
speed:动画的速度（可选参数：slow,normal,fase）
easing：动画的速度函数（可选参数：swing，linear）
callback：动画完成之后要执行的函数；
queue：是否放置在效果队列中，是布尔值，为false则立即开始
specialEasing:styles参数的一个或多个属性映射及对应的easing函数。}
{
speed: 动画的速度（可选参数：slow,normal,fase);
easing: 动画的速度函数（可选参数：swing，linear；
callback： 动画完场要执行的函数；
queue： 是否放置在效果队列中，是布尔值，为false则立即开始；
specialEasing： styles参数的一个或多个属性映射及对应的easing函数；
}
div.animate({height:‘300px’,opacity:‘0.4’},“slow”);
div.animate({width:‘300px’,opacity:‘0.8’},“slow”);
div.animate({height:‘100px’,opacity:‘0.4’},“slow”);
div.animate({width:‘100px’,opacity:‘0.8’},“slow”);

第四种.原生js动画

原生js动画利用js代码，将动画一步以函数的方式写出来，可以实现多种动画样式，而且可以自己做兼容性处理，自己设立每一步的动画效果，并且能够完成比较复杂的效果，但是代码量很大。如下面的例子：需要自己定义所有的动态函数，并进行计算、判断和处理

	<div id="odiv" class="odiv">
	     <div id="sdiv" class="sdiv">
	     </div>
	</div>
	 
	<script language="javascript">
	window.onload = function(){
	     var odiv = document.getElementById('odiv');
	     odiv.onmouseover = function(){
	      startMover(0);
	 }
	 odiv.onmouseout = function(){
	      startMover(-200);
	 }
	}
	var timer = null;
	function startMover(a){//速度和目标值
	     clearInterval(timer);//执行当前动画同时清除之前的动画
	     var odiv = document.getElementById('odiv');
	 timer = setInterval(function(){
	     var speed = (a-odiv.offsetLeft)/10;//缓冲动画的速度参数变化值
	 //如果速度是大于0，说明是向右走，那么就向上取整
	     speed = speed>0?Math.ceil(speed):Math.floor(speed);
	 //Math.floor();向下取整
	     if(odiv.offsetLeft == a){
	      clearInterval(timer);
	     }
	 else{
	      odiv.style.left = odiv.offsetLeft+speed+'px';
	  }
	 },30);
	}
	</script>

第五种，canvas画图，我们还可以使用canvas在浏览器上画图，并且利用其api，制作动画。canvas使用的地方非常多，尤其是在制作h5小游戏上。

同样都是使用编码的方式由前端开发工程师完成动画效果，canvas要比原生js效率高的多，流畅的多。通过画笔的方式，能够轻松的实现更多的动画效果。
下面是一个简单的canvas画图：


您的浏览器不支持 HTML5 canvas 标签。
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);

	// Create gradient
	var grd=ctx.createRadialGradient(75,50,5,90,60,100);
	grd.addColorStop(0,"red");
	grd.addColorStop(1,"white");
	
	// Fill with gradient
	ctx.fillStyle=grd;
	ctx.fillRect(10,10,150,80);

第六种，直接引用gif动态图；

如果在需求特别紧急，而且动画又特别复杂的情况下，自己没有把握按时实现效果，或者代价太大，真的，别犹豫，上gif图片吧，不要在技术上纠结了，虽然在工程师的角度上这样做很low，但是，用户的体验是没有影响的~所以，别纠结，就是要快！完成最重要了！