先看下效果： 

除了有點快，動畫效果還可以。

它是怎么實現(xiàn)的？

拿第一個雙塊舞動畫研究一下好啦。

mxml:

1.  
2. class="sk-wandering-cubes">
3. class="sk-cube sk-cube1">
4. class="sk-cube sk-cube2">
5.  

css:

1. .sk-wandering-cubes .sk-cube {
2. background-color: #67cf22;
3. width: 10px;
4. height: 10px;
5. position: absolute;
6. top: 0;
7. left: 0;
8. -webkit-animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both;
9. animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both;
10. }
11.  
12. .sk-wandering-cubes .sk-cube2 {
13. -webkit-animation-delay: -0.9s;
14. animation-delay: -0.9s;
15. }
16.  
17. @-webkit-keyframes sk-wanderingCube {
18. 0% {
19. -webkit-transform: rotate(0deg);
20. transform: rotate(0deg);
21. }
22.  
23. 25% {
24. -webkit-transform: translateX(30px) rotate(-90deg) scale(0.5);
25. transform: translateX(30px) rotate(-90deg) scale(0.5);
26. }
27.  
28. 50% {
29. /* Hack to make FF rotate in the right direction */
30. -webkit-transform: translateX(30px) translateY(30px) rotate(-179deg);
31. transform: translateX(30px) translateY(30px) rotate(-179deg);
32. }
33.  
34. 50.1% {
35. -webkit-transform: translateX(30px) translateY(30px) rotate(-180deg);
36. transform: translateX(30px) translateY(30px) rotate(-180deg);
37. }
38.  
39. 75% {
40. -webkit-transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5);
41. transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5);
42. }
43.  
44. 100% {
45. -webkit-transform: rotate(-360deg);
46. transform: rotate(-360deg);
47. }
48. }

是用css3動畫樣式實現(xiàn)的效果。sk-wanderingCube是自定義的動畫名稱，并非css3預(yù)定義的。

如果將兩個方塊，加到3個，如何？

添加一個sk-cube3，及其對應(yīng)的新式？

1. class="sk-cube sk-cube3">
2.  
3. .sk-wandering-cubes .sk-cube3 {
4. -webkit-animation-delay: -0.45s;
5. animation-delay: -0.45s;
6. }

運行一下，不失所望：

（實際運行效果沒有這么快，不知為什么用QQ截取動畫后就變快了~）

如果把動畫改慢一點，讓三個方塊，平均分布也是可以的，讓其在空間上平均分布，即是讓它們平均動畫時間。

達到這樣的效果，修改每楨間隔0.6s就可以了：

1. .sk-wandering-cubes .sk-cube {
2. background-color: #67cf22;
3. width: 10px;
4. height: 10px;
5. position: absolute;
6. top: 0;
7. left: 0;
8. -webkit-animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both;
9. }
10.  
11. .sk-wandering-cubes .sk-cube2 {
12. -webkit-animation-delay: -0.6s;
13. }
14.  
15. .sk-wandering-cubes .sk-cube3 {
16. -webkit-animation-delay: -1.2s;
17. }

此外，animation-delay是標準名稱，-webkit-animation-delay是safafi與chrome支持的名稱，其它以-webkit-開頭的css樣式名是類似的。

如果只保留-webkit-*聲明，如上所示。在微信web開發(fā)者工具上運行正常，因為它是基于chrome同樣的內(nèi)核渲染的css3樣式。在android手機上也可以，親測。在ios上沒有測試，有興趣的同學(xué)不妨測試下。

一般情況下，標準名稱與webkit名稱是同時定義的。

關(guān)于動畫的說明

使用@keyframes規(guī)則，你可以創(chuàng)建動畫。創(chuàng)建動畫是通過逐步改變從一個CSS樣式設(shè)定到另一個。

在動畫過程中，您可以更改CSS樣式的設(shè)定多次。指定的變化時發(fā)生時使用％，或關(guān)鍵字"from"和"to"，這是和0％到100％相同。0％是開頭動畫，100％是當動畫完成。

為了獲得最佳的瀏覽器支持，您應(yīng)該始終定義為0％和100％的選擇器。

注意: 使用animation屬性來控制動畫的外觀，還使用選擇器綁定動畫。.

綁定動畫的語法有些復(fù)雜：

1. animation: name duration timing-function delay iteration-count direction fill-mode play-state;

值說明animation-name指定要綁定到選擇器的關(guān)鍵幀的名稱animation-duration動畫指定需要多少秒或毫秒完成animation-timing-function設(shè)置動畫將如何完成一個周期animation-delay設(shè)置動畫在啟動前的延遲間隔。animation-iteration-count定義動畫的播放次數(shù)。animation-direction指定是否應(yīng)該輪流反向播放動畫。animation-fill-mode規(guī)定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應(yīng)用到元素的樣式。animation-play-state指定動畫是否正在運行或已暫停。initial設(shè)置屬性為其默認值。 閱讀關(guān)于 initial的介紹。inherit從父元素繼承屬性。 閱讀關(guān)于 initinherital的介紹。