過渡（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 就可以了  后面倆個屬性可以省略 */

transition: all 0.5s;

總結

以上是生活随笔為你收集整理的CSS3 过渡---transition的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。