CSSのtransitionによるhoverグラデーション
1235 ワード
CSS 3のTransitionプロパティは、マウスのクリック、フォーカスの取得、クリック、または要素の任意の変更にトリガーされ、スムーズにアニメーション効果でCSSのプロパティ値を変更することができます.
Transition:カラー変換の継続時間変換レート
transition:background-color 0.3s linear
変換速度:
1、ease:(徐々に遅くなる)デフォルト値、ease関数はベッセル曲線(0.25、0.1、0.25、1.0)に等しい.
2、linear:(均一速度)、linear関数はベッセル曲線(0.0,0.0,1.0,1.0)に等しい.
3、ease-in:(加速)、ease-in関数はベッセル曲線(0.42,0,1.0,1.0)に等しい.
4、ease-out:(減速)、ease-out関数はベッセル曲線(0,0,0.58,1.0)に等しい.
5、ease-in-out:(加速して減速)、ease-in-out関数はベッセル曲線(0.42、0、0.58、1.0)に等しい
6、cubic-bezier:(この値で時間曲線をカスタマイズできます)、特定のcubic-bezier曲線.(x 1,y 1,x 2,y 2)4つの値は、曲線上の点P 1と点P 2とに特定される.すべての値は[0,1]領域でなければ無効です.
//Mozillaカーネル
-moz-transition :
//Webkitカーネル
-webkit-transition :
//Opera
-o-transition :
//W 3 C規格
transition :
Transition:カラー変換の継続時間変換レート
transition:background-color 0.3s linear
変換速度:
1、ease:(徐々に遅くなる)デフォルト値、ease関数はベッセル曲線(0.25、0.1、0.25、1.0)に等しい.
2、linear:(均一速度)、linear関数はベッセル曲線(0.0,0.0,1.0,1.0)に等しい.
3、ease-in:(加速)、ease-in関数はベッセル曲線(0.42,0,1.0,1.0)に等しい.
4、ease-out:(減速)、ease-out関数はベッセル曲線(0,0,0.58,1.0)に等しい.
5、ease-in-out:(加速して減速)、ease-in-out関数はベッセル曲線(0.42、0、0.58、1.0)に等しい
6、cubic-bezier:(この値で時間曲線をカスタマイズできます)、特定のcubic-bezier曲線.(x 1,y 1,x 2,y 2)4つの値は、曲線上の点P 1と点P 2とに特定される.すべての値は[0,1]領域でなければ無効です.
//Mozillaカーネル
-moz-transition :
//Webkitカーネル
-webkit-transition :
//Opera
-o-transition :
//W 3 C規格
transition :
div ， 。
： Internet Explorer 。> >