CSS3屬性中有關于制作動畫的三個屬性：Transform,Transition,Animation；
一、Animation定義動畫
CSS3的Animation是由“keyframes”這個屬性來實作這樣的效果，keyframes就是關鍵幀。下面先來看看Keyframes:
Keyframes文法規則：
@keyframes 動畫名 {
from{開始狀态}
to{結束狀态}
}
調用
animation: 動畫名稱 持續時間 執行次數(infinite無限) alternate(來回) 運動曲線(linear線性) 延遲時間;
定義有兩種方式，from......to和百分比。具體方法如下： 1 <style>
2 div{
3 width: 200px;
4 height: 200px;
5 background-color: green;
6 margin: 100px;
7 /*調用動畫：動畫名 持續時間 執行次數(數字或無限) alternate(來回) 線性 延遲*/
8 /* animation: move 2s infinite alternate linear 1s;*/
9
10 animation: move2 4s infinite 1s;
11 }
12
13 /*定義動畫*/
14 @keyframes move {
15 from{
16 transform: translateX(100px) rotate(0deg);
17 }
18 to{
19 transform: translateX(800PX) rotate(360deg);
20 }
21
22 }
23 /*定義多組動畫*/
24 @keyframes move2 {
25 0%{
26 transform: translate(100px,100px);
27 background-color: green;
28 border-radius: 0;
29 }
30 25%{
31 transform: translate(600px,100px);
32 background-color: yellow;
33 }
34 50%{
35 transform: translate(600px,600px);
36 background-color: blue;
37 }
38 75%{
39 transform: translate(100px,600px);
40 background-color: orange;
41 }
42 100%{
43 transform: translate(100px,100px);
44 background-color: red;
45 border-radius: 50%;
46 }
47 }
48 </style> 二、動畫屬性
- animation-name: move;/*動畫名稱*/
- animation-duration: 2s; /*持續時間*/
- animation-iteration-count:3 ; /*動畫執行次數 無數次：infinite*/
- animation-direction: alternate;/*動畫方向 normal 正常,alternate 反向*/
- animation-delay: 1s;/*動畫延遲*/
- animation-fill-mode: forwards;/*設定動畫結束後盒子的狀态 forwards:動畫結束後的狀态 backwards:保持動畫開始前的狀态*/
- animation-timing-function: steps(3);/*運動曲線 linear線性 ease減速 ease-in 加速 ease-in-out先加速後減速 幀動畫 steps()*/
三、案例
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>太陽系</title>
6 <style>
7 body{
8 background-color: #000;
9 }
10 .sun{
11 width: 100px;
12 height: 100px;
13 position: absolute;
14 left:50%;
15 top:50%;
16 transform: translate(-50%,-50%);
17 background-color: yellow;
18 box-shadow: 0 0 30px 3px gold;
19 border-radius: 50%;
20 }
21 .earth{
22 width: 300px;
23 height: 300px;
24 position: absolute;
25 left:50%;
26 top:50%;
27 transform: translate(-50%,-50%);
28 border: 1px solid #ccc;
29 border-radius: 50%;
30 }
31 .earth::before{
32 content: '';
33 width: 40px;
34 height: 40px;
35 position: absolute;
36 left:0;
37 top:50%;
38 transform: translate(-50%,-50%);
39 background-color: dodgerblue;
40 border-radius: 50%;
41 }
42 .moon{
43 width: 80px;
44 height: 80px;
45 position: absolute;
46 left:0;
47 top:50%;
48 transform: translate(-50%,-50%);
49 border-radius: 50%;
50 animation: rot 2s infinite linear;
51 }
52 .moon::before{
53 content: '';
54 width: 10px;
55 height: 10px;
56 position: absolute;
57 left:0;
58 top:50%;
59 transform: translate(-50%,-50%);
60 background-color: #fff;
61 border-radius: 50%;
62 }
63 .venus{
64 width: 500px;
65 height: 500px;
66 position: absolute;
67 left:50%;
68 top:50%;
69 transform: translate(-50%,-50%);
70 border: 1px solid #ccc;
71 border-radius: 50%;
72 animation: rot 6s infinite linear;
73 }
74 .venus::before{
75 content: '';
76 width: 30px;
77 height: 30px;
78 position: absolute;
79 left:0;
80 top:50%;
81 transform: translate(-50%,-50%);
82 background-color: red;
83 border-radius: 50%;
84 }
85 .mars{
86 width: 600px;
87 height: 600px;
88 position: absolute;
89 left:50%;
90 top:50%;
91 transform: translate(-50%,-50%);
92 border: 1px solid #ccc;
93 border-radius: 50%;
94 animation: rot 10s infinite linear;
95 }
96 .mars::before{
97 content: '';
98 width: 50px;
99 height: 50px;
100 position: absolute;
101 left:0;
102 top:50%;
103 transform: translate(-50%,-50%);
104 background-color: green;
105 border-radius: 50%;
106 }
107 @keyframes rot {
108 0%{
109 transform:translate(-50%,-50%) rotate(0deg);
110 }
111 100%{
112 transform:translate(-50%,-50%) rotate(360deg);
113 }
114 }
115 </style>
116 </head>
117 <body>
118 <div class="sun"></div>
119 <div class="earth">
120 <div class="moon"></div>
121 </div>
122 <div class="venus"></div>
123 <div class="mars"></div>
124 </body>
125 </html>
運作效果：
![安卓——之Animation動畫特效[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)