深入理解CSS過渡屬性transition

CSS中過渡屬性transition，可以在不需要JS的情況下實現(xiàn)簡單的動畫交互效果。

定義

過渡transition是一個復(fù)合屬性，包括transition-property,transition-duration，transition-timing-function，transtion-delay四個子屬性。通過四個子屬性配合完成過度效果。

transition-property : 過渡屬性 （默認(rèn)為all）
transition-duration: 過渡時間（默認(rèn)為0s）
transition-timing-function: 過渡函數(shù)（默認(rèn)值是ease函數(shù)）
transition-delay: 過渡延遲函數(shù)

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 屬性。

Safari 支持替代的 -webkit-transition 屬性。

注釋：Internet Explorer 9 以及更早版本的瀏覽器不支持 transition 屬性。

Demo：

.test {
  height:100px;
  width:100px;
  background-color:red;
  transition-duration:3s;  /*過渡時間為3秒*/
  transition-property:all;
  transition-timing-function:ease;
  transition-delay:0s;
}
.test:hover{
  width:300px;
}

<div class="test"></test>

復(fù)合屬性

屬性transition這四個子屬性中，只有transition-duration是必需值且不能為0；其中transition-duration和tansition-delay都是時間，當(dāng)存在兩個時間時，第一個是transition-duration,如果出現(xiàn)兩個時間值，第一個是transition-duration，transition-delay為默認(rèn)值0s。

transition-property

過渡屬性：

• 值：none || all || <transition-property>

• 初始值：all

• 適用于：所有元素

• 繼承性：無

  none:沒有指定任何樣式
  all :默認(rèn)值，指定元素所有支持transition-property屬性的樣式
  <transition-property> : 可選過渡樣式
  

可過渡樣式

不是所有的CSS樣式都可以過渡，只有具有中間值的屬性才有過渡效果。

顏色：color background-color border-color outline-color
位置：background-position left right top botton
長度：
    [1]max-height min-height max-width min-width height width
    [2]border-width margin padding outline-width outline-offset
    [3]font-size line-height text-indent vertical-align  
    [4]border-spacing letter-spacing word-spacing
數(shù)字: opacity visibility z-index font-weight zoom
組合: text-shadow transform box-shadow clip
其他: gradient

過渡持續(xù)時間

該屬性單位是 秒（s）或者毫秒（ms）

transition-duration

• 值：<time>

• 初始值：0

• 應(yīng)用于：所有元素

• 繼承性：無

• 該屬性不能為負(fù)值

• 該屬性必須帶單位，如果為0s則為默認(rèn)值，如為0則為無效值

• 該值為單值時，所有的過渡屬性都對應(yīng)同樣時間；該值為多值時，過渡屬性按照順序?qū)?yīng)順序時間

  transition-property: width,background;
  

過渡延遲時間

該屬性定義元素延遲多少時間后開始過渡效果，該屬性單位是秒（s）或毫秒（ms）

transition-delay

• 值：<time>
• 初始值：0s
• 應(yīng)用于：所有元素
• 繼承性：無
• 【注意】若該屬性為負(fù)值，無延遲效果，但過渡元素的起始值將從0變成設(shè)定值（設(shè)定值=延遲時間+持續(xù)時間），若該設(shè)定值小于等于0；則無過渡效果；若該設(shè)定值大于0，則過渡元素從該設(shè)定值開始完成剩余的過渡效果。
• 【注意】該屬性必須帶單位，0s為默認(rèn)值，0則為無效值。
• 該值為單值時，所有過渡屬性都對應(yīng)同樣的時間；該值為多值時，過渡屬性按順序?qū)?yīng)持續(xù)時間。

過渡時間函數(shù)

過渡時間函數(shù)用于定義元素過渡屬性隨時間變化的過渡速度變化效果。

transition-timing-function

• 值：<timing-function>
• 初始值：ease
• 應(yīng)用于：所有元素
• 繼承性：無

取值

過渡時間函數(shù)取值共三種取值，分別是關(guān)鍵字、steps函數(shù)和bezier 函數(shù)。

steps函數(shù)

bezier函數(shù)

關(guān)鍵字

關(guān)鍵字是bezier函數(shù)或steps函數(shù)的特殊值。

ease:開始和結(jié)束慢，中間快。
linear：勻速
ease-in：開始慢
ease-out: 結(jié)束慢
ease-in-out：和ease類似，但比ease幅度大
step-start:直接位于結(jié)束處
step-end:位于開始處經(jīng)過時間間隔后結(jié)束。

多值功能

transition多個屬性值可以用逗號分隔開，表示同時為多個屬性值設(shè)置過渡屬性。

1. 設(shè)置不同的transition-property，對應(yīng)的transition-delay，transition-timing-function，transition-duration的屬性相同時，設(shè)置一個即可。

   #test1 {
     transition-property:width,background;
     transition-duration:3s;
     transition-timing-function:ease;
     transition-delay:500ms;
   }
   /*相當(dāng)于*/
   #test1 {
     transition:width 3s ease 500ms,background 3s ease 500ms;
   }
   

2. 當(dāng)transition-property的值的個數(shù)多余對應(yīng)的其他屬性時（屬性值大于1個），則按順序取值。

   #test{
     transition-property:width,background,opacity;
     transition-duration:2s,500ms;
     transition-timing-function:linera,ease;
     transition-delay:200ms,4s;
   }
   /*相當(dāng)于*/
   #test1{
     transition:width 2s linera 200ms, background 500ms ease 4s,opacity 2s linera 200ms;
   }
   

3. 當(dāng)transition-property值得個數(shù)少于對應(yīng)的其他屬性，則多余的屬性無效。

   #test1{
       transition-property: width;
       transition-duration: 2s,500ms;
       transition-timing-function: linear,ease;
       transition-delay: 200ms,0s;
   }
   /*類似于*/
   #test1{
       transition: width 2s linear 200ms;
   }
   

   ?

4. 當(dāng)transition-property的值中出現(xiàn)一個無效值，它依然按順序?qū)ransition的其他屬性值（其他屬性出現(xiàn)無效值，處理情況也類似）。

   #test1{
       transition-property: width,wuxiao,background;
       transition-duration: 2s,500ms;
       transition-timing-function: linear,ease;
       transition-delay: 200ms,0s;
   }
   /*類似于*/
   #test2{
       transition: width 2s linear 200ms,background 2s linear 200ms;
   }
   

5. 當(dāng)transition-property的值中，有些值重復(fù)出現(xiàn)多次，則以最后出現(xiàn)的值為準(zhǔn)，前面所有出現(xiàn)的值都被認(rèn)定為無效值，但依然按順序?qū)?yīng)transition的其他屬性值。

   #test1{
       transition-property: width,width,background;
       transition-duration: 2s,500ms;
       transition-timing-function: linear,ease;
       transition-delay: 200ms,0s;
   }
   /*類似于*/
   #test2{
       transition: width 500ms ease 0s,background 2s linear 200ms;
   }
   
   

過渡階段

1. 過渡開始時間=樣式改變時間+過渡延遲時間；

   過渡結(jié)束時間=過渡開始時間+過渡持續(xù)時間。

2. 過渡起始值=過渡前的過渡屬性值

   過渡結(jié)束值=過渡完成后的過渡屬性值。

3. 過渡分兩個階段：前進(jìn)（forward）和反向（reverse）。若前進(jìn)階段一段時間后進(jìn)入反向階段，則反向階段的初始值是前進(jìn)階段結(jié)束的瞬時值。

4. 以hover為例，若在元素的非hover狀態(tài)設(shè)置transition，相當(dāng)于設(shè)置的反向狀態(tài)，而前進(jìn)和反向是一致的。如果在hover設(shè)置transition，則前進(jìn)狀態(tài)以hover設(shè)置的為準(zhǔn)，反向以非hover的為準(zhǔn)。

5. 如果子元素和父元素的過渡屬性一致，若觸發(fā)子元素過渡時，父元素正在過渡，則將父元素過渡的中間態(tài)的值作為子元素過渡的初始值。

6. 若過渡起始值為auto，則瀏覽器不會自己計算具體數(shù)值，不會產(chǎn)生過渡效果。

7. 隱式過渡

觸發(fā)方式

一般過渡transition的觸發(fā)有三種方法，分別是偽類觸發(fā)、媒體查詢觸發(fā)和Javascript腳本觸發(fā)。

常見的是通過偽類觸發(fā)，包括hover,focus,active等。

• 偽類觸發(fā)

• 媒體查詢觸發(fā)

  /* 把瀏覽器的寬度拖動到小于1000px時觸發(fā) */
  @media (max-width: 1000px){
      .test{
          width: 500px;
      }
  }
  

• 點擊事件

  用戶點擊元素時觸發(fā)。

  test.onclick = function(){
      test.style.width = '300px';
      setTimeout(function(){
          test.style.width = '100px';
      },3000);
  }
  

API