CSS學習筆記–過渡模組

 
一、過渡模組( transition )：必須要有屬性發生改變
 1.告訴系統哪個屬性需要執行過渡效果（ transition-property: 屬性名稱 ）;
 2.告訴系統過渡效果持續的時長（ transition-duration： 時間 s）;
 
 注意點：
 1.層疊樣式列表會發生層疊，所以相同的屬性不能寫在後面；
 2.個屬性需要同時執行過渡效果時，用逗號隔開即可；例如： transition-property: width, background-color; (即寬度和背景顏色都要求隨時間的變化)
 
二、過渡三要素：
 1.必須有屬性發生變化（即，如寬度由10px到100px）；
 2.必須告訴系統那個屬性需要執行過渡效果(即，如寬/高度，顏色等屬性);
 3.必須告訴系統過渡效果持續的時長；
 
 補充點：

 1.告訴系統延遲多少秒之後才開始過渡動畫：transition-delay ;
 2.告訴系統過渡動畫的運動速度：
  transition-timing-function:
        (勻速) linear
     (逐漸慢下來) ease
        (加速) ease-in
        (減速) ease-out
   （先加速後減速）ease-in-out
 
三、過渡連寫格式：
 1.格式： tansition: 過渡屬性 過渡時長 運動速度 延遲時間；（例： transition： width 5s linear 0s )
 2.過渡連寫注意點：
  2.1 分開寫時一樣，如果想給多個屬性新增過渡效果也是用逗號隔開即可；（例：transition: width 5s linear 0s , background-color 4s linear 0s )
  2.2 寫的時候可以省略後面的兩個引數，因為只要編寫了前面兩個引數就已經滿足了過渡的三要素；
  2.3 如果多個屬性的運動的速度/延遲時間/持續時間都一樣，那麼可以簡寫為：transition: all 5s (即所有屬性過渡時間都為5s)
 
四、編寫過渡的套路：
 1.不要管過度，先編寫基本介面；
 2.修改我們認為需要修改的屬性；
 3.在回過頭去給被修改屬性的那個元素新增過渡即可；
 
 
 

---

===筆記內容來自於《從零玩轉HTML5前端+跨平臺開發》