您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“CSS3的相關(guān)屬性特點(diǎn)是什么”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“CSS3的相關(guān)屬性特點(diǎn)是什么”這篇文章吧。
概述 transition屬性
可以讓動(dòng)畫(huà)在CSS層面實(shí)現(xiàn),此時(shí)不是利用setInterval(),不是定時(shí)器,而是底層C++在渲染,渲染動(dòng)畫(huà)的質(zhì)量、絲滑程度都要遠(yuǎn)遠(yuǎn)優(yōu)于JS、jQuery。
要顛覆我們傳統(tǒng)制作網(wǎng)頁(yè)動(dòng)畫(huà)的思維模式,現(xiàn)在的手機(jī)頁(yè)面中,絕對(duì)不會(huì)有任何動(dòng)畫(huà)是setInterval()完成的,而都是過(guò)渡實(shí)現(xiàn)的。
今后2~3年,PC端也會(huì)這樣,過(guò)渡會(huì)淘汰setInterval()和animate函數(shù)。
語(yǔ)法:transition: property duration timing-function delay;時(shí)間的單位是:秒(s)。
值 說(shuō)明 屬性值 描述
transition-property 指定CSS屬性的name,transition效果 none 沒(méi)有屬性會(huì)獲得過(guò)渡效果。
all 所有屬性都將獲得過(guò)渡效果。
property 定義應(yīng)用過(guò)渡效果的 CSS 屬性名稱列表,列表以逗號(hào)分隔。
transition-duration transition效果需要指定多少秒或毫秒才能完成 規(guī)定完成過(guò)渡效果需要花費(fèi)的時(shí)間(以秒或毫秒計(jì))。
默認(rèn)值是 0,意味著不會(huì)有效果。
transition-timing-function
指定transition效果的轉(zhuǎn)速曲線
linear 以相同速度開(kāi)始至結(jié)束的過(guò)渡效果(等于 cubic-bezier(0,0,1,1))。
ease 慢速開(kāi)始,然后變快,然后慢速結(jié)束的過(guò)渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in 以慢速開(kāi)始的過(guò)渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out 以慢速結(jié)束的過(guò)渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out 以慢速開(kāi)始和結(jié)束的過(guò)渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函數(shù)中定義自己的值??赡艿闹凳?/span> 0 至 1 之間的數(shù)值。
transition-delay 定義transition效果開(kāi)始的時(shí)候 指定秒或毫秒數(shù)之前要等待切換效果開(kāi)始
什么屬性可以參與過(guò)渡
幾乎所有的CSS屬性都能過(guò)渡。
JQuery transition
background-color
background-position
background-image
任何的變形transform都能夠過(guò)渡
過(guò)渡動(dòng)畫(huà)的觸發(fā)條件
任何改變CSS的情況,都會(huì)觸發(fā)過(guò)渡。比如:hover、加減類、干脆直接設(shè)置CSS。
例如:
直接設(shè)置CSS會(huì)引發(fā)過(guò)渡動(dòng)畫(huà):
document.getElementById("box").style.width = "300px";
類名的改變會(huì)引發(fā)過(guò)渡動(dòng)畫(huà):
document.getElementById("box").className = "long";
特別注意: transition 不能繼承。
以上是“CSS3的相關(guān)屬性特點(diǎn)是什么”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。