您好,登錄后才能下訂單哦!
這篇文章運(yùn)用簡(jiǎn)單易懂的例子給大家介紹怎么使用css transition-delay屬性,代碼非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對(duì)大家能有所幫助。
css transition-delay屬性用于規(guī)定過渡效果何時(shí)開始,transition-delay值以秒或毫秒計(jì),其語法是transition-delay: time。
css transition-delay屬性怎么用?
作用:transition-delay 屬性規(guī)定過渡效果何時(shí)開始。transition-delay 值以秒或毫秒計(jì)。
語法:
transition-delay: time
說明:
time 規(guī)定在過渡效果開始之前需要等待的時(shí)間,以秒或毫秒計(jì)。
注釋:
Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-delay 屬性。
Safari 支持替代的 -webkit-transition-delay 屬性。
注釋:
Internet Explorer 9 以及更早版本的瀏覽器不支持 transition-delay 屬性。
css transition-delay屬性使用示例
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:blue; transition-property:width; transition-duration:5s; transition-delay:2s; /* Firefox 4 */ -moz-transition-property:width; -moz-transition-duration:5s; -moz-transition-delay:2s; /* Safari and Chrome */ -webkit-transition-property:width; -webkit-transition-duration:5s; -webkit-transition-delay:2s; /* Opera */ -o-transition-property:width; -o-transition-duration:5s; -o-transition-delay:2s; } div:hover { width:300px; } </style> </head> <body> <div></div> <p>請(qǐng)把鼠標(biāo)指針移動(dòng)到藍(lán)色的 div 元素上,就可以看到過渡效果。</p> <p><b>注釋:</b>過渡效果會(huì)在開始前等待兩秒鐘。</p> <p><b>注釋:</b>本例在 Internet Explorer 中無效。</p> </body> </html>
效果輸出:
關(guān)于怎么使用css transition-delay屬性就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(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)容。