概念

過(guò)渡-transition，時(shí)CSS3中具有顛覆性的特征之一，我們可以在不適用Flash動(dòng)畫(huà)或JavaScript的情況下，當(dāng)元素從一種樣式變換為另一個(gè)樣式時(shí)為元素添加效果。
過(guò)度動(dòng)畫(huà)：是從一個(gè)狀態(tài) 漸漸地過(guò)渡到另一個(gè)狀態(tài)
可以讓我們頁(yè)面更好看，更動(dòng)感十足，雖然 低版本瀏覽器不支持（IE9以下版本）但是不會(huì)印象頁(yè)面布局，并且經(jīng)常和hover一起搭配使用。

屬性

想要變化的CSS屬性，寬度高度 背景顏色 內(nèi)外邊距都可以，如果想要所有的屬性都變化過(guò)渡，寫(xiě)一個(gè)all就可以。

花費(fèi)時(shí)間

單位是秒（必須寫(xiě)單位） 比如 0.5s

運(yùn)動(dòng)曲線

默認(rèn)是ease（可以省略）

何時(shí)開(kāi)始

單位是秒（必須寫(xiě)單位）可以設(shè)置延遲觸發(fā)事件 默認(rèn)是0s（可以省略）

案例

div {
  width: 200px;
  height: 100px;
  background-color: pink;
  transition: width 1s .5s;
}
div:hover {
  width: 400px;
}

注意

• 多個(gè)過(guò)渡用all
• 誰(shuí)做過(guò)渡給誰(shuí)加