先看下效果： 

除了有点快，动画效果还可以。

它是怎么实现的？

拿第一个双块舞动画研究一下好啦。

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动画样式实现的效果。sk-wanderingCube是自定义的动画名称，并非css3预定义的。

如果将两个方块，加到3个，如何？

添加一个sk-cube3，及其对应的新式？

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开发者工具上运行正常，因为它是基于chrome同样的内核渲染的css3样式。在android手机上也可以，亲测。在ios上没有测试，有兴趣的同学不妨测试下。

一般情况下，标准名称与webkit名称是同时定义的。

关于动画的说明

使用@keyframes规则，你可以创建动画。创建动画是通过逐步改变从一个CSS样式设定到另一个。

在动画过程中，您可以更改CSS样式的设定多次。指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。0％是开头动画，100％是当动画完成。

为了获得最佳的浏览器支持，您应该始终定义为0％和100％的选择器。

注意: 使用animation属性来控制动画的外观，还使用选择器绑定动画。.

绑定动画的语法有些复杂：

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

值说明animation-name指定要绑定到选择器的关键帧的名称animation-duration动画指定需要多少秒或毫秒完成animation-timing-function设置动画将如何完成一个周期animation-delay设置动画在启动前的延迟间隔。animation-iteration-count定义动画的播放次数。animation-direction指定是否应该轮流反向播放动画。animation-fill-mode规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。animation-play-state指定动画是否正在运行或已暂停。initial设置属性为其默认值。 阅读关于 initial的介绍。inherit从父元素继承属性。 阅读关于 initinherital的介绍。