【疯狂的菊花系列】用CSS3帧动画实现Loading

一直以来，本人都认为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%处的。

双击选中源代码

1 2 3 4 5 6 7 8

@-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 )看demo，完整的代码如下：

双击选中源代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

@-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 (http://imatlas.com/wp-content/uploads/ 2011 / 10 /loading 3 .png) 0 0 ;      width : 128px ;      height : 128px ;      -webkit-animation: auto- circle 0.5 s step-end infinite ;      -moz-animation: auto- circle 0.5 s step-end infinite ;        margin : 20px ; }

因为是帧动画，你就需要确定这个菊花有多少帧，然后用百本比划分keyframes。 如果是两帧， 一个0%和一个100%就够了。 我的图片有10帧， 所以我把它划成10%一帧，0%跟-1000%是同一帧。

另外这里我用百分比设置position， 好处是如果loading的大小改变了， 并不需要去修改keyframes的background-position，就能够一劳永逸啦 ^_^。