過渡屬性 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屬性主要有：
| background-color | background-position | border-bottom-color | border-bottom-width |
| brder-left-color | border-left-width | border-right-color | border-right-width |
| border-spacing | border-top-color | border-top-width | bottom |
| clip | color | font-size | font-weight |
| height | left | letter-spacing | line-height |
| margin-bottom | margin-left | margin-right | margin-top |
| max-height | max-width | min-height | min-width |
| opacity | outline-color | outline-width | padding-bottom |
| padding-left | padding-right | padding-top | right |
| text-indent | text-shadow | vertical-align | visibility |
| width | word-spacing | z-index |
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”。
