先看下效果： 

除了有點(diǎn)快，動(dòng)畫效果還可以。

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

拿第一個(gè)雙塊舞動(dòng)畫研究一下好啦。

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動(dòng)畫樣式實(shí)現(xiàn)的效果。sk-wanderingCube是自定義的動(dòng)畫名稱，并非css3預(yù)定義的。

如果將兩個(gè)方塊，加到3個(gè)，如何？

添加一個(gè)sk-cube3，及其對(duì)應(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. }

運(yùn)行一下，不失所望：

（實(shí)際運(yùn)行效果沒有這么快，不知為什么用QQ截取動(dòng)畫后就變快了~）

如果把動(dòng)畫改慢一點(diǎn)，讓三個(gè)方塊，平均分布也是可以的，讓其在空間上平均分布，即是讓它們平均動(dòng)畫時(shí)間。

達(dá)到這樣的效果，修改每楨間隔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是標(biāo)準(zhǔn)名稱，-webkit-animation-delay是safafi與chrome支持的名稱，其它以-webkit-開頭的css樣式名是類似的。

如果只保留-webkit-*聲明，如上所示。在微信web開發(fā)者工具上運(yùn)行正常，因?yàn)樗腔赾hrome同樣的內(nèi)核渲染的css3樣式。在android手機(jī)上也可以，親測。在ios上沒有測試，有興趣的同學(xué)不妨測試下。

一般情況下，標(biāo)準(zhǔn)名稱與webkit名稱是同時(shí)定義的。

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

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

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

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

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

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

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

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