1. 程式人生 > >transition屬性實現hover漸變動畫效果

transition屬性實現hover漸變動畫效果

span style -o 效果 web 自定義 動畫效果 microsoft 默認

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曲線。 (x1, y1, x2, y2)四個值特定於曲線上點P1和點P2。所有值需在[0, 1]區域內,否則無效。

//Mozilla內核

-moz-transition :

//Webkit內核

-webkit-transition :

//Opera

-o-transition :

//W3C 標準

transition :

transition屬性實現hover漸變動畫效果