CSS3読み込みanimation_html/css_WEB-ITnose

HTML コード

1. #loading{
3. margin-top:30px;  
5. float:left;  
7. 幅:95px;  
9. 高さ:32px;  
13. margin-left:30px;  
15. /* CSS3圆角边框 */
17. -webkit-border-radius: 5px;  
19. -moz-border-radius: 5px;  
21. border-radius: 5px;  
22. }
24. .columns{
28. border:1px solid #fff;  
30. float:left;  
32. 高さ:30px;  
34. margin-left:5px;  
36. 幅:10px;  
38. /* 在这儿我们定义一动画名，随后我们将会实现它 */
40. -webkit-animation-name: animation;  
42. /* アニメーション画循環环一次的总時間 */
44. -webkit-animation-duration: 3s;  
46. /* アニメーション画の循環次数、我们设置は無穷大 */
48. -webkit-animation-iteration-count: infinite;  
50. -webkit-animation-direction: リニア;  
52. /* 最初のすべての列の透明度都：0 */
54. 不透明度:0;  
56. /* 開始時将它缩放は0.8 */
58. -webkit-transform:scale(0.8);  
60. }
62. #coloumn1{
64. /* 第一列アニメーション画延迟0.3秒 */
66. -webkit-animation-delay: .3 秒;  
68. }
70. #coloumn2{
72. /* 第二列アニメーション画延迟0.4秒 */
74. -webkit-アニメーション遅延: .4秒;  
76. }
78. #coloumn3{
80. /* 3 列目のアニメーションは 0.5 秒遅れます*/
82. -webkit-animation-delay:
84. }
86. #column4{
87. 四番目/*4列目のアニメーションは0.6秒遅れます*/