一、@keyframe
定义和用法
@keyframes是用来创建帧动画的，我们通过这个属性可以用纯css来实现一些动画效果。
一般格式是：
@keyframes 动画名称{
0%{
动画开始时的样式
}
100%{
动画结束时的样式
}
}
以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间，浏览器可以自动补间，中间也可以设置多个百分比，实现更加多变的动画效果。
由于@keyframes 属性是css3新属性，许多浏览器都要加兼容性前缀：
Firefox：-moz-
Opera ：-o-
Safari 和 Chrome：-webkit-
为了获得最佳的浏览器支持，我们始终定义 0% 和 100% 选择器。
二、animation
定义和用法
animation属性是写在要实现动画的元素的选择器中的，实现元素的动画绑定。animation 属性是一个简写属性，用于设置六个动画属性：
animation-name ： 规定需要绑定到选择器的 keyframe 名称。
animation-duration ： 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function ： 规定动画的速度曲线。
animation-delay ： 规定在动画开始之前的延迟。
animation-iteration-count ： 规定动画应该播放的次数。
animation-direction ： 规定是否应该轮流反向播放动画。
语法
animation: name duration timing-function delay iteration-count direction
1.animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数来生成速度曲线。我们能够在该函数中使用自己的值，也可以使用预定义的值：
linear：动画从头到尾的速度是相同的。
ease：默认。动画以低速开始，然后加快，在结束前变慢。
ease-in：动画以低速开始。
ease-out：动画以低速结束。
ease-in-out：动画以低速开始和结束。
cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
2.animation-iteration-count: n | infinite;
n：定义动画播放次数的数值。
infinite：规定动画应该无限次播放。
3.animation-direction:normal | alternate;
normal：默认值，动画正常播放。
alternate：动画轮流反向播放（动画在奇数次数正常播放，在偶数次数向后播放）。
Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。
Safari 和 Chrome 支持替代的 -webkit-animation 属性。
三、例子
