早期在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”。