CSS3中的過渡、動畫和變換
一、過渡
過渡效果一般由瀏覽器直接改變元素的CSS屬性實現。
a、transition屬性
transition 屬性是一個簡寫屬性，用於設置四個過渡屬性：
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
註釋：請始終設置 transition-duration 屬性，否則時長為 0，就不會產生過渡效果。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <
可以設置設置某個屬性的過渡持續時間（transition: width 2s,background 3s,3s linear 3s;），也可以設置所有的屬性的過渡的持續時間（transition: width,background,
b、transition-property
transition-property 屬性規定應用過渡效果的 CSS 屬性的名稱。（當指定的 CSS 屬性改變時，過渡效果將開始）。
提示：過渡效果通常在用戶將鼠標指針浮動到元素上時發生。
c、transition-duration
transition-duration 屬性規定完成過渡效果需要花費的時間（以秒或毫秒計）。
d、transition-timing-funtion
transition-timing-function 屬性規定過渡效果的速度曲線。該屬性允許過渡效果隨著時間來改變其速度。
e、transition-delay
transition-delay 屬性規定過渡效果何時開始。transition-delay 值以秒或毫秒計。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 div{
8 width: 100px;
9 height: 100px;
10 background: blue;
11 }
12 div:hover{
13 width: 300px;
14 background: red;
15 transition-property: width,background;
16 transition-duration: 3s;
17 transition-timing-function: linear;
18 transition-delay: 0ms;
19 }
20 </style>
21 </head>
22 <body>
23 <div>
24
25 </div>
26 </body>
27 </html>
其中過渡屬性之間用逗號隔開，可以為延遲時間和持續時間設置多個值，分別對應不同的屬性。
變化過程
上面的過都效果只有鼠標懸停在元素上才會發生，當鼠標離開時，會恢復到元素的開始狀態，可以設置反向過渡，使元素的過渡樣式平滑的返回初始樣式。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 div{
8 width: 100px;
9 height: 100px;
10 background: blue;
11 transition: width 2s,background 3s, 3s linear 3s;/*反向過渡*/
12 }
13 div:hover{
14 width: 300px;
15 background: red;
16 transition: width,background, 3s linear 2s;
17 }
18 </style>
19 </head>
20 <body>
21 <div>
22
23 </div>
24 </body>
25 </html>
註意：
Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 屬性。Safari 支持替代的 -webkit-transition 屬性。
註釋：Internet Explorer 9 以及更早版本的瀏覽器不支持 transition 屬性。
二、動畫
CSS3中的過渡、動畫和變換