【动画】通过css ：@keyframes、animation规则创建动画

通过@keyframes规则，可以创建动画

原理： 将一套css样式逐渐变为另一套css样式

用法：以百分比或“from”、“to”关键字来控制动画开始和结束。在动画过程中，可以多次改变这套css样式

animation是一个简写的属性，主要用于设置6个动画属性：

• animation-name:需要绑定到选择器上的keyframe的名字

• animation-duration:完成动画所花费的时间（s、ms）

• animation-timing-function:动画的速度曲线

• animation-delay:动画开始之前的延迟，允许负值，-2s使动画马上开始，但是跳过2s进入动画

• animation-interation-count:动画应该播放的次数，几次或无数次 （n、infinite）

• animation-direction:是否轮流反向播放动画，正常播放、轮流反向播放（normal、alternate）

animation-timing-function可能的值：

linear	动画从头到尾的速度都是相同的（匀速）
ease	默认。动画以低速开始，中间加快，在结束前又变慢
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以速度开始以低速结束
cubic-bezier(n,n,n,n)	自定义值，可能的值为0到1之间的数字

动画示例详见另一篇文章