過渡(CSS3)

過渡（transition)是CSS3中具備顛覆性的特徵之一，咱們能夠在不使用 Flash 動畫或 JavaScript 的狀況下，當元素從一種樣式變換爲另外一種樣式時爲元素添加效果。

幀動畫：經過一幀一幀的畫面按照固定順序和速度播放。如電影膠片

在CSS3裏使用transition能夠實現補間動畫（過渡效果），而且當前元素只要有「屬性」發生變化時即存在兩種狀態(咱們用A和B代指），就能夠實現平滑的過渡，爲了方便演示採用hover切換兩種狀態，可是並不單單侷限於hover狀態來實現過渡。

語法格式:

transition: 要過渡的屬性 花費時間 運動曲線 什麼時候開始;
若是有多組屬性變化，仍是用逗號隔開。

屬性	描述	CSS
transition	簡寫屬性，用於在一個屬性中設置四個過渡屬性。	3
transition-property	規定應用過渡的 CSS 屬性的名稱。	3
transition-duration	定義過渡效果花費的時間。默認是 0。	3
transition-timing-function	規定過渡效果的時間曲線。默認是 "ease"。	3
transition-delay	規定過渡效果什麼時候開始。默認是 0。	3

若是想要全部的屬性都變化過渡， 寫一個all 就能夠

transition-duration 花費時間 單位是 秒 s 好比 0.5s 這個s單位必須寫 ms 毫秒

運動曲線 默認是 ease

什麼時候開始 默認是 0s 立馬開始

運動曲線示意圖：

 

 

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 { /* 鼠標通過盒子，咱們的寬度變爲400 */

width: 600px;
height: 300px
}

transition: all 0.6s; /* 全部屬性都變化用all 就能夠了 後面倆個屬性能夠省略 */