认识css关键帧动画

一，css动画

我们可以使用 CSS3的一些属性，能够创建动画，可以在许多网页中取代动画图片、Flash 动画以及JavaScript

二，关键帧动画的了解

animation这个属性也就是关键帧动画，配合@keyframs的使用，可以绘制一个简单的动画效果， transition这个属性作用就是可以作为过度的作用，可以让动画在规定的时间里面执行， transform这个属性的作用可以让规定的内容出现旋转，伸缩，移动。

1,兼容性
IE10+、Firefox 以及 Opera 支持animation和@keyframs，而Chrome 和 Safari 需要前缀 -webkit-。

2，@keyframs关键帧属性
不同于过渡动画只能定义首尾两个状态，关键帧动画可以定义多个状态，
或者用关键帧的话来说，过渡动画只能定义第一帧和最后一帧这两个关键帧，而关键帧动画则可以定义任意多的关键帧，因而能实现更复杂的动画效果。
写法：

//第一种写法
 @keyframes move{
2 　　from{}
3 　　to{}
4 }   }
//第二种写法
      @keyframes move{
2 　　  0%{}
       50%{}
       100%{}
4 }   }

可以在每个括号里面设置每个阶段变化的属性，从而实现简单的动态效果

3，Animation 属性
当在 @keyframes 中创建动画时，还要把它捆绑到某个选择器，否则不会产生动画效果，绑定后设置动画的名称和动画的时长
过渡类型：

• linear：线性过渡。
• ease：平滑过渡。
• ease-in：由慢到快。
• ease-out：由快到慢。
• ease-in-out：由慢到快再到慢。
• step-start:马上跳到动画每一结束桢的状态

循环次数：
infinite：无限循环，或者是随意设置循环几次

运动方向：

• normal：正常方向
• reverse：反方向运行
• alternate：动画先正常运行再反方向运行
• alternate-reverse：动画先反运行再正方向运行

动画状态：

• running:运动
• paused: 暂停

对于书写Animation 属性，建议简写，也就是把每个属性都写在一起

div{
	  	animation: move 10s ease-in normal infinite ;
	  }
      @keyframes move{
2 　　  0%{}
       50%{}
       100%{}
4 }   }