早期在Web中要實(shí)現(xiàn)動畫效果，都是依賴于JavaScript或Flash來完成。但在CSS3中新增加了一個新的模塊transition，它可以通過一些簡單的CSS事件來觸發(fā)元素的外觀變化，讓效果顯得更加細(xì)膩。簡單點(diǎn)說，就是通過鼠標(biāo)的單擊、獲得焦點(diǎn)，被點(diǎn)擊或對元素任何改變中觸發(fā)，并平滑地以動畫效果改變CSS的屬性值。

在CSS中創(chuàng)建簡單的過渡效果可以從以下幾個步驟來實(shí)現(xiàn)：
第一，在默認(rèn)樣式中聲明元素的初始狀態(tài)樣式；
第二，聲明過渡元素最終狀態(tài)樣式，比如懸浮狀態(tài)；
第三，在默認(rèn)樣式中通過添加過渡函數(shù)，添加一些不同的樣式。

CSS3的過度transition屬性是一個復(fù)合屬性，主要包括以下幾個子屬性：

• transition-property:指定過渡或動態(tài)模擬的CSS屬性

• transition-duration:指定完成過渡所需的時間

• transition-timing-function:指定過渡函數(shù)

• transition-delay:指定開始出現(xiàn)的延遲時間

先來看transition-property屬性

transition-property用來指定過渡動畫的CSS屬性名稱，而這個過渡屬性只有具備一個中點(diǎn)值的屬性（需要產(chǎn)生動畫的屬性）才能具備過渡效果，其對應(yīng)具有過渡的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;
}

演示結(jié)果:

鼠標(biāo)移入

鼠標(biāo)移出

特別注意：當(dāng)“transition-property”屬性設(shè)置為all時，表示的是所有中點(diǎn)值的屬性。

用一個簡單的例子來說明這個問題：

假設(shè)你的初始狀態(tài)設(shè)置了樣式“width”,“height”,“background”,當(dāng)你在終始狀態(tài)都改變了這三個屬性，那么all代表的就是“width”、“height”和“background”。如果你的終始狀態(tài)只改變了“width”和“height”時，那么all代表的就是“width”和“height”。