一.Keyframes介紹：
Keyframes被稱爲關鍵幀，其類似於Flash中的關鍵幀。在CSS3中其主要以“@keyframes”開頭，後面緊跟着是動畫名稱加上一對花括號“{…}”，括號中就是一些不同時間段樣式規則。
@keyframes changecolor{
0%{
background: red;
}
100%{
background: green;
}
}
示例：創建一個動畫名叫“changecolor”，在“0%”時背景色爲red,在20%時背景色爲blue，在40%背景色爲orange，在60%背景色爲green，在80%時背景色yellow，在100%處時背景色爲red。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<!DOCTYPE
html><html><head>
<meta
charset="utf-8"><title>css3動畫</title><style>@keyframes changecolor{ 0%{ background: red; } 20%{ background:blue; } 40%{ background:orange; } 60%{ background:green; } 80%{ background:yellow; } 100%{ background: red; }}div { width: 300px; height: 200px; background: red; color:#fff; margin: 20px auto;}div:hover { animation: changecolor 5s ease-out .2s;}</style></head>
<body><div>hover顏色改變</div></body></html> |
二.設置動畫播放方式
語法規則：
animation-timing-function:ease(由快到慢，逐漸變慢) | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
三.設置動畫播放方向
animation-direction屬性主要用來設置動畫播放方向，其語法規則如下：
animation-direction:normal | alternate [, normal | alternate]*
其主要有兩個值：normal、alternate
1、normal是默認值，如果設置爲normal時，動畫的每次循環都是向前播放；
2、另一個值是alternate，他的作用是，動畫播放在第偶數次向前播放，第奇數次向反方向播放。
四.設置動畫的播放狀態
animation-play-state屬性主要用來控制元素動畫的播放狀態。
參數：
其主要有兩個值：running和paused。
其中running是其默認值，主要作用就是類似於音樂播放器一樣，可以通過paused將正在播放的動畫停下來，也可以通過running將暫停的動畫重新播放，這裏的重新播放不一定是從元素動畫的開始播放，而是從暫停的那個位置開始播放。另外如果暫停了動畫的播放，元素的樣式將回到最原始設置狀態。
例如，頁面加載時，動畫不播放。代碼如下：
animation-play-state:paused;
五.設置動畫時間外屬性
animation-fill-mode屬性定義在動畫開始之前和結束之後發生的操作。主要具有四個屬性值：none、forwards、backwords和both。其四個屬性值對應效果如下：
|
屬性值 |
效果 |
|
none |
默認值，表示動畫將按預期進行和結束，在動畫完成其最後一幀時，動畫會反轉到初始幀處 |
|
forwards |
表示動畫在結束後繼續應用最後的關鍵幀的位置 |
|
backwards |
會在向元素應用動畫樣式時迅速應用動畫的初始幀 |
|
both |
元素動畫同時具有forwards和backwards效果 |
在默認情況之下，動畫不會影響它的關鍵幀之外的屬性，使用animation-fill-mode屬性可以修改動畫的默認行爲。簡單的說就是告訴動畫在第一關鍵幀上等待動畫開始，或者在動畫結束時停在最後一個關鍵幀上而不回到動畫的第一幀上。或者同時具有這兩個效果。
例如：讓動畫停在最一幀處。代碼如下：
animation-fill-mode:forwards;