一直以来，本人都认为css3的animation只能实现渐变动画，比如高度从0渐变到100px这类的。而无法实现高度从0跳变到50px再跳变到100px这种类似flash的帧动画效果。
但是在看到天才的师姐给的例子之后， 让我愧疚得无地自容，原来还真有css3帧动画的，T_T。这个属性是 timing-function: step-end; 而且firefox、webkit、ie10都有支持，详细介绍可以在这里(https://developer.mozilla.org/en/CSS/timing-function#step-end)看。
跟帧动画有关的timing-function有step-start，step-end。就拿step-end来说， 它的效果是在每一步的结束点， 进行跳变。
比如下面的代码，这个动画有两步， 如果是用linear方式渐变，那么在动画的执行过程中，background-position-x的值将从0一直递减到-100%， 你看到的效果就是： 背景图片一直在慢慢的向右(注意，是向右)移动； 而如果用step-end方式，则可以看到背景是突然变成 background-position-x: -100%处的。more
@-webkit-keyframes auto-circle{
0%{
background-position-x: 0;
}
100%{
background-position-x: -100%;
}
}
说的再多也不如演示来的实际，有了step-end，我们又可以实现一种菊花啦，高清无码， 这下子gif要完完全全的失业了，嘿嘿... 你可以把鼠标狠狠地砸向[这里](http://demo.imatlas.com/css3-frame-loading-demo.html)( http://demo.imatlas.com/css3-frame-loading-demo.html )看demo，完整的代码如下：
@-webkit-keyframes auto-circle{
0%{
background-position-x: 0;
}
10%{
background-position-x: -100%;
}
20%{
background-position-x: -200%;
}
//... 你看不到的省略代码
90%{
background-position-x: -900%;
}
100%{
background-position-x: -1000%;
}
}
@-moz-keyframes auto-circle{
0%{
background-position-x: 0;
}
10%{
background-position-x: -100%;
}
20%{
background-position-x: -200%;
}
//... 你看不到的省略代码
90%{
background-position-x: -900%;
}
100%{
background-position-x: -1000%;
}
}
.loading{
background: url(/uploads/2011-10-01/loading3.png) 0 0;
width: 128px;
height: 128px;
-webkit-animation: auto-circle 0.5s step-end infinite ;
-moz-animation: auto-circle 0.5s step-end infinite ;
margin: 20px;
}
因为是帧动画，你就需要确定这个菊花有多少帧，然后用百本比划分keyframes。 如果是两帧， 一个0%和一个100%就够了。 我的图片有10帧， 所以我把它划成10%一帧，0%跟-1000%是同一帧。
另外这里我用百分比设置position， 好处是如果loading的大小改变了， 并不需要去修改keyframes的background-position，就能够一劳永逸啦 ^_^。
参考资料：
- http://dev.w3.org/csswg/css3-transitions/#transition-timing-function
- https://developer.mozilla.org/en/CSS/timing-function#step-end
- http://msdn.microsoft.com/en-us/library/windows/apps/hh466322.aspx