CSS3 Animation动画

要使用CSS3 Animation动画，我们就必须了解keyframes。

keyframes具有自己的规则，它的命名是由"@keyframes"开头的。

@keyframes zoomIn{

from{

transform:scale(.1);

}

to{ transform:scale(1); }

}

/*相当于0%开始，100%结束*/

@keyframes zoomIn{

0%{ transform:scale(.1); }

100%{ transform:scale(1); }

}

@keyframes animationName{
0%{}
25%{}
65%{}
100%{}
}

既然是css3的新属性，多少会有兼容性的问题。

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-，也就是@-webkit-keyframes

而Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

动画已经创建好了，那么如何去使用动画。

这时，animation就出场了。

它共有8个属性：

• animation-name  规定 @keyframes 动画的名称。
• animation-duration  规定动画完成一个周期所花费的秒或毫秒。默认是 0。
• animation-timing-function  规定动画的速度曲线。默认是 "ease"。
• animation-delay  规定动画何时开始。默认是 0。
• animation-iteration-count  规定动画被播放的次数。默认是 1。
• animation-direction  规定动画是否在下一周期逆向地播放。默认是 "normal"。
• animation-fill-mode   规定动画在播放之前或之后，其动画效果是否可见。
• animation-play-state  规定动画是否正在运行或暂停。默认是 "running"。

1、animation-name

用来定义一个动画的名称。

如果要设置几个animation给一个元素，我们只需要以列表的形式，用逗号“，”隔开

2.animation-duration

用来指定元素播放动画所持续的时间长，单位为秒（s）或毫秒（ms），默认值为0

3.animation-timing-function

• linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
  
• ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
  
• ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
  
• ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
  
• ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
  

• cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

4.animation-delay

用来指定元素动画开始时间

允许负值

animation-delay : -2s; //负值，动画跳过 2 秒进入动画周期，也就是从2s的动画开始
-webkit-animation-delay: -2s;

5.animation-iteration-count

用来指定元素播放动画的循环次数，其可以取值<number>为数字，其默认值为“1”；infinite为无限次数循环。

6.animation-direction

用来指定元素动画播放的方向。

可能值：

• 默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；
• reverse 动画反向播放。
  
• alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。（2016年12月14日更新）
• alternate-reverse 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。（2016年12月14日更新）
  

7.animation-fill-mode

检索或设置对象动画时间之外的状态

none：

默认值。不设置对象动画之外的状态

forwards：

设置对象状态为动画结束时的状态

backwards：

设置对象状态为动画开始时的状态

both：

设置对象状态为动画结束或开始的状态

8.animation-play-state

用来控制元素动画的播放状态。其主要有两个值，running和paused。其中running为默认值。

可以通过paused将正在播放的动画停下了，也可以通过running将暂停的动画重新播放，我们这里的重新播放不一定是从元素动画的开始播放，而是从你暂停的那个位置开始播放。另外如果暂时了动画的播放，元素的样式将回到最原始设置状态。

综合使用

animation : name duration timing-function delay iteration-count direction fill-mode play-state

 到这里，我们已经知道如何去设置一个animation动画，但有些时候，我们需要在动画开始时去执行一个指令或者在动画结束后执行一个指令。

animationstart - CSS 动画开始后触发 

animationiteration - CSS 动画重复播放时触发 

animationend - CSS 动画完成后触发

监听动画结束

/*在jQuery中*/
$(element).on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oAnimationEnd animationend",fn());

/*原生js*/
element.addEventListener("webkitAnimationEnd",fn())  // Chrome, Safari 和 Opera
element.addEventListener("mozAnimationEnd",fn())  //标准写法