6). 知識點 -過渡(CSS3)
過渡（transition)是CSS3中具有顛覆性的特征之一，我們可以在不使用 Flash 動畫或 JavaScript 的情況下，當元素從一種樣式變換為另一種樣式時為元素添加效果。
過渡動畫： 是從一個狀態(tài) 漸漸的過渡到另外一個狀態(tài)
可以讓我們頁面更好看，更動感十足，雖然 低版本瀏覽器不支持（ie9以下版本） 但是不會影響頁面布局。
我們現(xiàn)在經(jīng)常和 :hover 一起 搭配使用。
語法格式:
transition: 要過渡的屬性 花費時間 運動曲線 何時開始;
| 屬性 | 描述 | CSS |
|---|---|---|
| transition | 簡寫屬性，用于在一個屬性中設置四個過渡屬性。 | 3 |
| transition-property | 規(guī)定應用過渡的 CSS 屬性的名稱。 | 3 |
| transition-duration | 定義過渡效果花費的時間。默認是 0。 | 3 |
| transition-timing-function | 規(guī)定過渡效果的時間曲線。默認是 "ease"。 | 3 |
| transition-delay | 規(guī)定過渡效果何時開始。默認是 0。 | 3 |
- 屬性
? 屬性就是你想要變化的 css 屬性， 寬度高度 背景顏色 內外邊距都可以 。如果想要所有的屬性都變化過渡， 寫一個all 就可以。
-
花費時間
transition-duration 花費時間 單位是 秒（必須寫單位） s ms 比如 0.5s 這個s單位必須寫 ms 毫秒
運動曲線 默認是 ease
-
何時開始
默認是 0s 鼠標觸發(fā)就立即開始 可以設置 延遲觸發(fā)時間
案例：
div {
width: 200px;
height: 100px;
background-color: pink;
/* transition: 要過渡的屬性 花費時間 運動曲線 何時開始; */
transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
/* transtion 過渡的意思 這句話寫到div里面而不是 hover里面 */
}
div:hover { /* 鼠標經(jīng)過盒子，我們的寬度變?yōu)?00 */
width: 600px;
height: 300px
}
transition: all 0.6s; /* 所有屬性都變化用all 就可以了 后面?zhèn)z個屬性可以省略 */
transition: all 0.5s;
常見效果：
按鈕變換底色 圖片移動 小米效果 （陰影效果） 傳智導航欄效果 等等
