1.首先，先設定乙個div，待會我們使用css3給這個div設定過渡效果。
2.然後給div設定寬高和背景，這裡我就設定成200畫素，深粉色。
3.接著開始設定transition屬性，通過這個屬性就可以給元素新增過渡效果。
4.如圖所示 ，第乙個引數表示的是要過渡的屬性值，第二個引數表示的是過渡時間，這裡我就設定背景過渡。
5.接著再設定滑鼠經過div元素時背景顏色為暗藍色。
6.之後，預覽div背景過渡效果，當滑鼠放在div元素上面就會由深粉色過渡到暗藍色，過渡時間是五秒鐘（這裡因為是靜態，待會我會貼出原始碼）。
7.如果要設定多個屬性過渡可以把它們用逗號隔開，比如要同時設定背景和寬度過渡，則可以這樣寫。
8.接著再給div:hover設定寬度為400畫素。
9.這樣，當我們滑鼠經過div元素時，背景會過渡，同時div元素的寬度也會由200畫素過渡到400畫素 。.
為了更好參考，我就貼出源**，直接儲存為html檔案就可以檢視效果了哦。
CSS 的過渡效果
屬性 取值說明 transition property 屬性名稱 指定需要過渡效果的屬性 all可以用過渡效果的屬性則顯示過渡效果 常用 transition duration 以秒或毫秒為單位的數字 指定過渡時長 transition timing function ease 慢速開始，快速變化，...
css 動畫過渡效果
transition 要過渡的屬性 花費時間 遠動曲線 何時開始 簡寫 transition property 要過渡的屬性名稱 transition duration 定義過渡花費的時間 預設是0 transition timing function 過渡效果的時間曲線 預設是 ease line...
vue元素實現動畫過渡效果
1 在 vue 中，使用標籤包含著的單個子元素在使用v show或v if切換顯示隱藏前，會先判斷是否有對應的class樣式能匹配到該子元素上 事例中，當點選 button，div 並不會馬上 display none，而是首先設定 v le e 下一刻即刪除 v le e 同時新增 v le e ...