【疯狂的菊花系列】用CSS3帧动画实现Loading
一直以来，本人都认为css3的animation只能实现渐变动画，比如高度从0渐变到100px这类的。而无法实现高度从0跳变到50px再跳变到100px这种类似flash的帧动画效果。
跟帧动画有关的timing-function有step-start，step-end。就拿step-end来说， 它的效果是在每一步的结束点， 进行跳变。
比如下面的代码，这个动画有两步， 如果是用linear方式渐变，那么在动画的执行过程中，background-position-x的值将从0一直递减到-100%， 你看到的效果就是： 背景图片一直在慢慢的向右(注意，是向右)移动； 而如果用step-end方式，则可以看到背景是突然变成 background-position-x: -100%处的。more
因为是帧动画，你就需要确定这个菊花有多少帧，然后用百本比划分keyframes。 如果是两帧， 一个0%和一个100%就够了。 我的图片有10帧， 所以我把它划成10%一帧，0%跟-1000%是同一帧。
另外这里我用百分比设置position， 好处是如果loading的大小改变了， 并不需要去修改keyframes的background-position，就能够一劳永逸啦 ^_^。