動畫--過渡屬性 transition-property
早期在Web中要實現動畫效果，都是依賴於JavaScript或Flash來完成。但在CSS3中新增加了一個新的模塊transition，它可以通過一些簡單的CSS事件來觸發元素的外觀變化，讓效果顯得更加細膩。簡單點說，就是通過鼠標的單擊、獲得焦點，被點擊或對元素任何改變中觸發，並平滑地以動畫效果改變CSS的屬性值。
在CSS中創建簡單的過渡效果可以從以下幾個步驟來實現： 第一，在默認樣式中聲明元素的初始狀態樣式； 第二，聲明過渡元素最終狀態樣式，比如懸浮狀態； 第三，在默認樣式中通過添加過渡函數，添加一些不同的樣式。
CSS3的過度transition屬性是一個復合屬性，主要包括以下幾個子屬性：
-
transition-property:指定過渡或動態模擬的CSS屬性
-
transition-duration:指定完成過渡所需的時間
-
transition-timing-function:指定過渡函數
-
transition-delay:指定開始出現的延遲時間
先來看transition-property屬性
transition-property用來指定過渡動畫的CSS屬性名稱，而這個過渡屬性只有具備一個中點值的屬性（需要產生動畫的屬性）才能具備過渡效果，其對應具有過渡的CSS屬性主要有：
HTML:
<div></div>
CSS:
div { width: 200px; height: 200px; background-color:red; margin: 20px auto; -webkit-transition: background-color .5s ease .1s; transition: background-color .5s ease .1s; } div:hover { background-color: orange; }
演示結果:
鼠標移入
鼠標移出
特別注意：當“transition-property”屬性設置為all時，表示的是所有中點值的屬性。
用一個簡單的例子來說明這個問題：
假設你的初始狀態設置了樣式“width”,“height”,“background”,當你在終始狀態都改變了這三個屬性，那么all代表的就是“width”、“height”和“background”。如果你的終始狀態只改變了“width”和“height”時，那么all代表的就是“width”和“height”。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>變形與動畫</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div></div> </body> </html>
div { width: 200px; height: 200px; background: red; margin: 20px auto; -webkit-transition-property: width; -webkit-transition-property:background; transition-property:background; transition-property: width; -webkit-transition-duration:1s; transition-duration:1s; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; -webkit-transition-delay: 1s; transition-delay:1s; } div:hover { width: 400px; background:yellow; }