css transition-timing-function属性

transition

transition

英[trænˈzɪʃn]美[trænˈzɪʃən, -ˈsɪʃ-]

#タイミング

タイミング

英[ˈtaɪmɪŋ] 美[ˈtaɪmɪŋ]

function

function

英[ ˈfʌŋkʃn] 美[ˈfʌŋkʃən]

css transition-timing-function属性 構文

関数:transition-timing-function 属性は、トランジション効果の速度曲線を指定します。このプロパティにより、トランジション効果の速度を時間の経過とともに変化させることができます。

構文:transition-timing-function: Linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n) ;

説明:linear は、同じ速度で開始および終了するトランジション エフェクトを指定します (cubic-bezier(0,0,1,1) に等しい)。 Ease は、ゆっくりと始まり、次に速くなり、その後ゆっくりと終了するトランジション効果を指定します (cubic-bezier(0.25,0.1,0.25,1))。イーズインは、低速で開始するトランジション エフェクトを指定します (cubic-bezier(0.42,0,1,1) と同等)。イーズアウトは、低速で終了するトランジション エフェクトを指定します (cubic-bezier(0,0,0.58,1) に等しい)。 easy-in-out は、低速で開始および終了するトランジション エフェクトを指定します (cubic-bezier(0.42,0,0.58,1) と同等)。 cubic-bezier(n,n,n,n) cubic-bezier 関数で独自の値を定義します。可能な値は 0 ～ 1 です。

注:Internet Explorer 10、Firefox、Opera、および Chrome は、transition-timing-function 属性をサポートしています。 Safari は、代替の -webkit-transition-timing-function 属性をサポートしています。注: Internet Explorer 9 以前のブラウザは、transition-timing-function 属性をサポートしていません。

css transition-timing-function属性 例

    
  
 
请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。
 
注释：本例在 Internet Explorer 中无效。