CSS3中transition怎么用

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

成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供樅陽企業(yè)網(wǎng)站建設(shè),專注與做網(wǎng)站、網(wǎng)站制作、H5頁面制作、小程序制作等業(yè)務(wù)。10年已為樅陽眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進(jìn)行中。

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

要顛覆我們傳統(tǒng)制作網(wǎng)頁動(dòng)畫的思維模式，現(xiàn)在的手機(jī)頁面中，絕對(duì)不會(huì)有任何動(dòng)畫是setInterval()完成的，而都是過渡實(shí)現(xiàn)的。今后2~3年，PC端也會(huì)這樣，過渡會(huì)淘汰setInterval()和animate函數(shù)。

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

transition-property 指定CSS屬性的name，transition效果 none 沒有屬性會(huì)獲得過渡效果。all 所有屬性都將獲得過渡效果。property 定義應(yīng)用過渡效果的 CSS 屬性名稱列表，列表以逗號(hào)分隔。transition-duration transition效果需要指定多少秒或毫秒才能完成 規(guī)定完成過渡效果需要花費(fèi)的時(shí)間（以秒或毫秒計(jì)）。默認(rèn)值是 0，意味著不會(huì)有效果。

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ù)中定義自己的值。可能的值是 0 至 1 之間的數(shù)值。
transition-delay 定義transition效果開始的時(shí)候 指定秒或毫秒數(shù)之前要等待切換效果開始

什么屬性可以參與過渡？

幾乎所有的CSS屬性都能過渡。
JQuery transition
background-color
background-position
background-image
任何的變形transform都能夠過渡

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

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

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

類名的改變會(huì)引發(fā)過渡動(dòng)畫：

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

特別注意: transition 不能繼承。

以上是“CSS3中transition怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁題目：CSS3中transition怎么用
鏈接地址：http://muchs.cn/article12/ghisgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、面包屑導(dǎo)航、網(wǎng)站營(yíng)銷、網(wǎng)站排名、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)