CSS3之动画animation

一提起动画，给人的感觉就是高大上。在一个Web项目中，若想要交互效果Perfect的话，那必然动画的元素是少不了的，在CSS3没有出现之前，大部分的网页动画效果都是由JavaScript或者JQuery以及Flash完成的，这对于无法熟练使用JS的同学来说无疑是块难以跨越的坎，好了，废话不多说，直接进入正题。

在CSS３中，要想实现一个动画，那么首先得先定义一个动画（暂时先不考虑浏览器兼容的问题，目前主流浏览器大部分都支持CSS3动画）：

@keyframes name{ /*name定义动画名称*/
   	from{}/*from定义的是动画的初始状态*/
   	to{} /*to定义的是动画的结束状态*/
 }

标注：由于使用form···to来定义动画的始末状态的话，无法在中间操作动画元素，只能定义动画一帧，所以还有一种方法：

@keyframes name{
   	0%{  
   		/*0%跟from的效果一样*/	
   	}
   	15%{}
   	20%{}
   	50%{}
   	60%{}
   	100%{
   		/*100%跟to的效果一样*/
   	}
   		/*不同的是，使用%来定义动画的帧可以定义无数帧，百分数嘛，你懂得！*/
 }

例如：

@keyframes move{
   	0%{
   		transform: translateX(50px) scale(0) ;
   			
   	}
   	50%{
   		transform: translateX(600px) scale(0.4);
   	}
   	60%{
   		transform: translateX(700px) scale(0.7);
   	}
   	80%{
   		transform: translateX(700px) scale(0.9);
   	}
   	100%{
   		transform: translateX(-500px) scale(1) translateY(250px) ;
   	}
}

在CSS中定义好动画之后，接下来就要应用动画了，首先介绍动画的一些属性：

在CSS3中，应用动画用animation-属性，其对应的一些相关属性有：

• animation-name：引用的动画名称，也就是@keyframes后面的名字。
• animation-duration：规定动画完成所需的时间
• animation-delay：规定动画多久后才执行，也就是动画延时
• animation-direction：规定动画执行结束后的方向，默认是normal，还有一个为“alternate”，意为动画来回执行。
• animation-fill-mode：属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
• animation-iteration-count：规定动画执行的次数（infinite为无限循环执行）
• animation-play-state：规定动画的状态，默认为running，如果设置为paused为动画暂停
  
• animation-timing-function：规定动画的速度曲线。默认是 "ease"
  

例如：

#cloud{
   	animation-name: move;
   	animation-duration: 2s;
   	animation-delay: .2s;
   	animation-direction: alternate;
   	animation-fill-mode: forwards;
   	animation-iteration-count: infinite;
   	animation-play-state: running;
   	animation-timing-function:linear ;
   	}
@keyframes move{
   0%{
   	transform: translateX(50px) scale(0) ;
   			
   }
   50%{
   	transform: translateX(600px) scale(0.4);
   }
   60%{
   	transform: translateX(700px) scale(0.7);
   }
   80%{
   	transform: translateX(700px) scale(0.9);
   }
   100%{
   	transform: translateX(-500px) scale(1) translateY(250px) ;
   }
}

当然这东西太长了，可以使用animation将所有动画属性值见写到一行里：

#cloud{
   	animation: move 15s ease-in-out .2s infinite alternate; /*各属性值之间用空格隔开，第一个时间默认为为动画完成所需时间，后面的时间才是动画延时*/
}

它所有的用法就都介绍完了，用animation可以做出很多你想要的效果;下面附上一张小编自己用CSS3 animation做的心跳动画：