Css3技術(shù)中的transition屬性怎么用

小編給大家分享一下Css3技術(shù)中的transition屬性怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

可以讓動畫在CSS層面實(shí)現(xiàn)，此時不是利用setInterval()，不是定時器，而是底層C++在渲染，渲染動畫的質(zhì)量、絲滑程度都要遠(yuǎn)遠(yuǎn)優(yōu)于JS、jQuery。

要顛覆我們傳統(tǒng)制作網(wǎng)頁動畫的思維模式，現(xiàn)在的手機(jī)頁面中，絕對不會有任何動畫是setInterval()完成的，而都是過渡實(shí)現(xiàn)的。

今后2~3年，PC端也會這樣，過渡會淘汰setInterval()和animate函數(shù)。

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

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

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

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

transition-duration transition效果需要指定多少秒或毫秒才能完成 規(guī)定完成過渡效果需要花費(fèi)的時間（以秒或毫秒計(jì)）。

默認(rèn)值是 0，意味著不會有效果。

transition-timing-function

指定transition效果的轉(zhuǎn)速曲線

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

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

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

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

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

cubic-bezier(n,n,n,n) 在 cubic-bezier 函數(shù)中定義自己的值?？赡艿闹凳?span lang="EN-US"> 0 至 1 之間的數(shù)值。

transition-delay 定義transition效果開始的時候 指定秒或毫秒數(shù)之前要等待切換效果開始

什么屬性可以參與過渡？

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

JQuery transition

background-color

background-position

background-image

任何的變形transform都能夠過渡

過渡動畫的觸發(fā)條件？

任何改變CSS的情況，都會觸發(fā)過渡。比如：hover、加減類、干脆直接設(shè)置CSS。

例如：

直接設(shè)置CSS會引發(fā)過渡動畫：

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

類名的改變會引發(fā)過渡動畫：

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

特別注意: transition 不能繼承。

以上是“Css3技術(shù)中的transition屬性怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！