css的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發，并圓滑地以動畫效果改變CSS的屬性值

1.語法：transition: property duration timing-function delay;

參數1：執行變換的屬性transition-property

參數2：變換延續的時間：transition-duration

參數3：在延續時間段，變換的速率變化transition-timing-function

參數4：變換延遲時間transition-delay

2.參數一：transition-property

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

3.參數二：transition-duration

transition-duration是用來指定元素 轉換過程的持續時間，取值：為數值，單位為s（秒）或者ms(毫秒),可以作用于所有元素，包括:before和:after偽元素。其默認值是0，也就是變換時是即時的

4.參數三：transition-timing-function

transition-timing-function的值允許你根據時間的推進去改變屬性值的變換速率，transition-timing-function有6個可能值

- ease：（逐漸變慢）默認值，ease函數等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0)

- linear：（勻速），linear 函數等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0)

- ease-in：(加速)，ease-in 函數等同于貝塞爾曲線(0.42, 0, 1.0, 1.0)

- ease-out：（減速），ease-out 函數等同于貝塞爾曲線(0, 0, 0.58, 1.0)

- ease-in-out：（加速然后減速），ease-in-out 函數等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)

- cubic-bezier：（該值允許你去自定義一個時間曲線）， 特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值特定于曲線上點P1和點P2。所有值需在[0, 1]區域內，否則無效

5.參數四：transition-delay

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

6.同時過渡多個屬性

有時我們不只改變一個css效果的屬性,而是想改變兩個或者多個css屬性的transition效果，那么我們只要把幾個transition的聲明串在一起，用逗號（“，”）隔開，然后各自可以有各自不同的延續時間和其時間的速率變換方式。但需要值得注意的一點：transition-delay與transition-duration的值都是時間，所以要區分它們在連寫中的位置，一般瀏覽器會根據先后順序決定，第一個可以解析為時間的怭值為transition-duration第二個為transition-delay

如果你想給元素執行所有transition效果的屬性，那么我們還可以利用all屬性值來操作，此時他們共享同樣的延續時間以及速率變換方式

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

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