css3動畫-載入中...

寫幾個簡單的載入中動畫吧。

像前面三種都是相當於幾個不同的點輪流來播放同一動畫：變大變小。css3裡面有一個用於尺度變換的方法：scale(x,y)：定義 2D 縮放轉換，改變元素的寬度和高度。

第四種就是一個小球從上往下跌落，再彈回去，在上面的時候速度最小，下麵的時候速度最大。由於該小球只進行了上下的移動，所以我們可以運用：translateY(n)：定義 2D 轉換，沿著 Y 軸移動元素，從而實現小球沿Y方向來回移動。

廢話不多說了，上代碼。

首先，第一個載入中的動畫：

1 <div id="loading1">
2         <div class="demo1"></div>
3         <div class="demo1"></div>
4         <div class="demo1"></div>
5         <div class="demo1"></div>
6         <div class="demo1"></div>
7 </div>

 1 .demo1 {
 2     width: 4px;
 3     height: 4px;
 4     border-radius: 2px;
 5     background: #68b2ce;
 6     float: left;
 7     margin: 0 3px;
 8     animation: demo1 linear 1s infinite;
 9     -webkit-animation: demo1 linear 1s infinite;
10 }
11 .demo1:nth-child(1){
12     animation-delay:0s;
13 }
14 .demo1:nth-child(2){
15     animation-delay:0.15s;
16 }
17 .demo1:nth-child(3){
18     animation-delay:0.3s;
19 }
20 .demo1:nth-child(4){
21     animation-delay:0.45s;
22 }
23 .demo1:nth-child(5){
24     animation-delay:0.6s;
25 }
26 @keyframes demo1 
27 {
28     0%,60%,100% {transform: scale(1);}
29     30% {transform: scale(2.5);}
30 }
31 @-webkit-keyframes demo1 
32 {
33     0%,60%,100% {transform: scale(1);}
34     30% {transform: scale(2.5);}
35 }

第二個動畫和第一個動畫大同小異，第一個動畫是將小球整體變大變小，第二動畫則是將小方塊的高度變大變小，而寬度不變：

1 <div id="loading2">
2     <div class="demo2"></div>
3     <div class="demo2"></div>
4     <div class="demo2"></div>
5     <div class="demo2"></div>
6     <div class="demo2"></div>
7 </div>

 1 .demo2 {
 2     width: 4px;
 3     height: 6px;
 4     background: #68b2ce;
 5     float: left;
 6     margin: 0 3px;
 7     animation: demo2 linear 1s infinite;
 8     -webkit-animation: demo2 linear 1s infinite;
 9 }
10 .demo2:nth-child(1){
11     animation-delay:0s;
12 }
13 .demo2:nth-child(2){
14     animation-delay:0.15s;
15 }
16 .demo2:nth-child(3){
17     animation-delay:0.3s;
18 }
19 .demo2:nth-child(4){
20     animation-delay:0.45s;
21 }
22 .demo2:nth-child(5){
23     animation-delay:0.6s;
24 }
25 @keyframes demo2 
26 {
27     0%,60%,100% {transform: scale(1);}
28     30% {transform: scaleY(3);}
29 }
30 @-webkit-keyframes demo2 
31 {
32     0%,60%,100% {transform: scale(1);}
33     30% {transform: scaleY(3);}
34 }

第三個動畫就需要將小球的位置定位一下，讓幾個小球整體上看起來圍成一個圓，然後就像第一個一樣使小球變大變小：

 1 <div id="loading3">
 2      <div class="demo3"></div>
 3      <div class="demo3"></div>
 4      <div class="demo3"></div>
 5      <div class="demo3"></div>
 6      <div class="demo3"></div>
 7      <div class="demo3"></div>
 8      <div class="demo3"></div>
 9      <div class="demo3"></div>
10 </div>

 1 #loading3 {
 2     position: relative;
 3     width: 50px;
 4     height: 50px;
 5 }
 6 .demo3 {
 7     width: 4px;
 8     height: 4px;
 9     border-radius: 2px;
10     background: #68b2ce;
11     position: absolute;
12     animation: demo3 linear 0.8s infinite;
13     -webkit-animation: demo3 linear 0.8s infinite;
14 }
15 .demo3:nth-child(1){
16     left: 24px;
17     top: 2px;
18     animation-delay:0s;
19 }
20 .demo3:nth-child(2){
21     left: 40px;
22     top: 8px;
23     animation-delay:0.1s;
24 }
25 .demo3:nth-child(3){
26     left: 47px;
27     top: 24px;
28     animation-delay:0.1s;
29 }
30 .demo3:nth-child(4){
31     left: 40px;
32     top: 40px;
33     animation-delay:0.2s;
34 }
35 .demo3:nth-child(5){
36     left: 24px;
37     top: 47px;
38     animation-delay:0.4s;
39 }
40 .demo3:nth-child(6){
41     left: 8px;
42     top: 40px;
43     animation-delay:0.5s;
44 }
45 .demo3:nth-child(7){
46     left: 2px;
47     top: 24px;
48     animation-delay:0.6s;
49 }
50 .demo3:nth-child(8){
51     left: 8px;
52     top: 8px;
53     animation-delay:0.7s;
54 }
55 
56 @keyframes demo3 
57 {
58     0%,40%,100% {transform: scale(1);}
59     20% {transform: scale(3);}
60 }
61 @-webkit-keyframes demo3 
62 {
63     0%,40%,100% {transform: scale(1);}
64     20% {transform: scale(3);}
65 }

接下來是第四個動畫：

1 <div id="loading5">
2      <div class="demo5"></div>
3 </div>

 1 #loading5 {
 2     width: 20px;
 3     height: 100px;
 4     border-bottom: 1px solid #68b2ce;
 5 }
 6 .demo5 {
 7     width: 20px;
 8     height: 20px;
 9     border-radius: 10px;
10     background: #68b2ce;
11     animation: demo5 cubic-bezier(0.5,0.01,0.9,1) 0.6s infinite alternate;
12     -webkit-animation: demo5 cubic-bezier(0.5,0.01,0.9,1) 0.6s infinite alternate;
13 }
14 @keyframes demo5
15 {
16     0%{
17         transform:translateY(0px);
18         -webkit-transform:translateY(0px);
19     }
20     100% {
21         transform:translateY(80px);
22         -webkit-transform:translateY(80px);
23     }
24 }
25 @-webkit-keyframes demo5
26 {
27     0%{
28         transform:translateY(0px);
29         -webkit-transform:translateY(0px);
30     }
31     100% {
32         transform:translateY(80px);
33         -webkit-transform:translateY(80px);
34     }
35 }

以上就是這幾個簡單的載入中小動畫的內容了。