微信小程序--几个有趣的css3动画

先看下效果： 

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

它是怎么实现的？

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

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. 邀请