【瘋狂的菊花系列】用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{
|