CSS3中過渡動畫怎麼使用

我們知道，在CSS3中有一個 transition屬性，它可以讓動畫在CSS層面實現，既不是利用setInterval()，不是定時器，而是底層C++在渲染，這樣就使渲染動畫的品質、絲滑程度都要遠遠優於JS、jQuery。我們今天就來看一下這個 transition屬性的具體使用方法。

要顛覆我們傳統製作網頁動畫的思維模式，現在的手機頁面中，絕對不會有任何動畫是setInterval()完成的，而都是過渡實現的。

文法：transition: property duration timing-function delay;時間的單位是：秒（s）。

transition-property 指定CSS屬性的name，transition效果 none 沒有屬性會獲得過渡效果。

all 所有屬性都將獲得過渡效果。

property 定義應用過渡效果的 CSS 屬性名稱列表，列表以逗號分隔。

transition-duration transition效果需要指定多少秒或毫秒才能完成 規定完成過渡效果需要花費的時間（以秒或毫秒計）。

預設值是 0，意味著不會有效果。

transition-timing-function

指定transition效果的轉速曲線

linear 以相同速度開始至結束的過渡效果（等於 cubic-bezier(0,0,1,1)）。

ease 慢速開始，然後變快，然後慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。

ease-in 以慢速開始的過渡效果（等於 cubic-bezier(0.42,0,1,1)）。

ease-out 以慢速結束的過渡效果（等於 cubic-bezier(0,0,0.58,1)）。

ease-in-out 以慢速開始和結束的過渡效果（等於 cubic-bezier(0.42,0,0.58,1)）。

cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。

transition-delay 定義transition效果開始的時候 指定秒或毫秒數之前要等待轉場效果開始

什麼屬性可以參與過渡

幾乎所有的CSS屬性都能過渡。

JQuery transition

background-color

background-position

background-image

任何的變形transform都能夠過渡

過渡動畫的觸發條件

任何改變CSS的情況，都會觸發過渡。比如：hover、加減類、乾脆直接設定CSS。

document.getElementById("box").style.width = "300px";

類名的改變會引發過渡動畫：

document.getElementById("box").className = "long";

特別注意: transition 不能繼承。

關於transition屬性的使用方法就這麼多了，更多精彩請關注php中文網其它相關文章！

相關閱讀：

CSS3有哪些新增的背景屬性

怎麼用CSS3媒體查詢

css3的彈性盒怎麼做出來