• 新增某種效果可以從一種樣式轉變到另一個的樣式。transition: width 2s, height 2s;
1. 指定要新增效果的CSS屬性
2. 指定效果的持續時間
• 過渡屬性
• transition簡寫屬性，用於在一個屬性中設定四個過渡屬性
• transition-property規定應用過渡的 CSS 屬性的名稱transition-property：all ;
• transition-duration定義過渡效果花費的時間。預設是 0
• transition-timing-function規定過渡效果的時間曲線。預設是 "ease" cubic-bezier(0,1.95,.83,.67)貝塞爾曲線
• transition-delay規定過渡效果何時開始。預設是 0

 1 div{
 2             width: 100px;
 3             height: 100px;
 4             background: red;
 5             /* 設定過渡css的屬性 */
 6             transition-property: all;
 7             /* 過渡延遲時間 */
 8             transition-delay: 2s;
 9             /* 完成過渡需要花費的總時間 */
10
 
             transition-duration: 4s;
11             /* 過渡動畫的運動方式  貝塞爾曲線*/
12             transition-timing-function: cubic-bezier(0,1.95,.83,.67)
13              /* transition-timing-function:ease; */
14         }
15         div:hover{
16             width: 200px;
17             height: 200px;
18             background: greenyellow;
 
19         }