transition

語法:

transition:[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]

默認值看每個獨立屬性

取值:

[ transition-property ]:
檢索或設置對象中的參與過渡的屬性
[ transition-duration ]:
檢索或設置對象過渡的持續時間
[ transition-timing-function ]:
檢索或設置對象中過渡的動畫類型
[ transition-delay ]:
檢索或設置對象延遲過渡的時間

說明:

複合屬性。檢索或設置對象變換時的過渡。
  • 可以爲同一元素的多個屬性定義過渡效果。示例:

    縮寫方式:

    transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;

    拆分方式:

    transition-property:border-color, background-color, color;
    
    transition-duration:.5s, .5s, .5s;
    
    transition-timing-function:ease-in, ease-in, ease-in;
    
    transition-delay:.1s, .1s, .1s;
  • 如果定義了多個過渡的屬性,而其他屬性只有一個參數值,則表明所有需要過渡的屬性都應用同一個參數值。據此可以對上面的例子進行縮寫:

    拆分方式:

    transition-property:border-color, background-color, color;
    
    transition-duration:.5s;
    
    transition-timing-function:ease-in;
    
    transition-delay:.1s;
  • 如果需要定义多个過渡屬性且不想指定具体是哪些属性过渡,同时其他属性只有一个参数值,据此可以对上面的例子进行缩写:

    縮寫方式:

    transition:all .5s ease-in .1s;

    拆分方式:

    transition-property:all;
    
    transition-duration:.5s;
    
    transition-timing-function:ease-in;
    
    transition-delay:.1s;
  • 對應的腳本特性爲transition

兼容性:

  • 淺綠 = 支持
  • 紅色 = 不支持
  • 墨綠 = 部分支持
  • 橙色 = 实验性质
支持版本\類型 IE Firefox Safari Chrome Opera
版本 6.0-9.0 4.0-9.0 5.1 13.0-16.0 11.50-11.60
版本 10.0

寫法:

內核類型 寫法
Webkit(Chrome/Safari) -webkit-transition
Gecko(Firefox) -moz-transition
Presto(Opera) -o-transition
Trident(IE) -ms-transition
W3C transition

示例: