它可以用來做什么？

CSS transitions可以讓一個css屬性值在一個給定的時間內平滑的改變，而不再是和以前一樣，當我們設置一個css屬性值時，它會立即表現出來結果，如color: red, 當我們設置完這個屬性，如果是應用在span上，那么span內的文字立即會變成紅色。而我們如果用到transition,那么這個值就會在一定時間內，假設以前是黑色，就會由黑色逐漸變成紅色，而不再是立即變成紅色。

誰支持它？

?

如何用它？

transition: <property>?<duration>?<animation type>?<delay>

webkit:-webkit-transition; mozilla: -moz-transition; opera: -o-transition; IE 10 beta: -ms-transition;

#id_of_element {-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out;

<property>:是用來指定當元素其中一個屬性改變時執行transition效果，其主要有以下幾個值：none(沒有屬性改 變)；all（所有屬性改變）這個也是其默認值；還有就是css屬性。當其值為none時，transition馬上停止執行，當指定為all 時，則元素產生任何屬性值變化時都將執行transition效果，CSS屬性是可以指定元素的某一個屬性值。

<duration>:是用來指定元素 轉換過程的持續時間，取值：<time>為數值，單位為s（秒）,可以作用于所有元素，包括:before和:after偽元素。其默認值是0，也就是和不用transition的效果是一樣的，即時發生效果。

<animation type>:取值可以從下列取值中選取，其實就是貝塞爾曲線的變化，覺得很難，這里有個工具網站可以幫你完成這些取值

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]區域內，否則無效。

?

下面讓我們看一組實際效果關于選擇不同的animation type：

Ease

Ease
In

Ease
Out

Ease
In Out

Linear

Custom

Awesome!

Hover on me

MouseOver上去對于每個test-box執行了如下操作：

background-color: #FFFFFF; border-radius: 30px 30px 30px 30px; margin-left: 420px; transform: rotate(720deg);

<delay>: 是用來指定一個動畫開始執行的時間，也就是說當改變元素屬性值后多長時間開始執行transition效果，其取 值：<time>為數值，單位為s（秒），其使用和transition-duration極其相似，也可以作用于所有元素，包 括:before和:after偽元素。 默認大小是"0"，也就是變換立即執行，沒有延遲。

讓我們來看一組關于delay的例子:

Hover on me

?參考文章：

http://css3.bradshawenterprises.com/transitions/

http://www.w3cplus.com/content/css3-transition

轉載于:https://www.cnblogs.com/moonreplace/archive/2012/10/19/2730081.html

總結

以上是生活随笔為你收集整理的CSS3--transition的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。