CSS3 Annimation

animation有8个属性

name duration delay iteration-count diration play-state fill-mode
timing-function

animation-timing-function规定动画的速度曲线

liner 动画从头到尾的速度是相同的
ease 默认。动画以低速开始。然后加快，在速度结束前变慢。
ease-in 动画以低速开始
ease-out 动画以低速结束
ease-in-out 动画以低速开始和结束
cubic-bezier(n,n,n,n)在cubic-bezier函数中自己的值。可能的值是从0到1数值。

理解steps

第一个参数指定了时间函数中的间隔变量 第二个参数可选，接受start和end两个值，指定在每个间隔的起点获释终点发生阶跃变化，默认为end。
step-start等同于step（1，start),动画执行时为开始左侧端点的部分为开始；
step-end等同于step（1，end）,动画分成一步，动画执行时以结尾端点为开始，默认值为end。