解決CSS3 transition-delay 屬性默認(rèn)值0不帶單位失效的問題

今天愛分享給大家?guī)鞢SS3 transition-delay 屬性默認(rèn)值0不帶單位失效【問題解決】,希望能夠幫助到大家。
CSS3 里面的 transition-delay 用了0默認(rèn)值 本來按前端代碼規(guī)范來說 0 最好是不帶任何單位 比如:margin: 0;padding: 0; 等等 而不是 padding: 0px; margin: 0px;
所以在用到 transition-delay 的時(shí)候我也用了 transition-delay: 0; 然后就出現(xiàn)問題了。
直接上圖:
沒有寫單位直接用的默認(rèn) 0
沒有寫單位直接用的默認(rèn) 0 的效果
反復(fù)查了很久然后開始懷疑人生的時(shí)候也不知道為什么我把單位加上了。居然實(shí)現(xiàn)了我想要的效果。
在默認(rèn)值 0 上加上單位
總結(jié): 其實(shí)倆個(gè)效果問題不大。但是實(shí)際上還是有很大的區(qū)別的。因?yàn)槭莿?dòng)效,個(gè)人覺得只要有規(guī)律的動(dòng)起來只要不是鬼畜其實(shí)都可以接受。但是如果在真的項(xiàng)目中也用到了 transition-delay 使用 0 的時(shí)候失效而達(dá)不到用戶或者公司想要的效果就得不償失了。至于在CSS3里面其他的新屬性會(huì)不會(huì)出現(xiàn)這樣的情況就不清楚了。
到此這篇關(guān)于解決CSS3 transition-delay 屬性默認(rèn)值0不帶單位失效的問題的文章就介紹到這了,更多相關(guān)CSS3 transition-delay 屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
CSS3使用transition屬性實(shí)現(xiàn)過渡效果
CSS3中新增的transform屬性,可以實(shí)現(xiàn)元素在變換過程中的過渡效果,實(shí)現(xiàn)了基本的動(dòng)畫。下面通過本文給大家介紹CSS3使用transition屬性實(shí)現(xiàn)過渡效果,需要的朋友參考下本文2018-04-18詳解css3 Transition屬性(平滑過渡菜單欄案例)
這篇文章主要介紹了詳解css3 Transition屬性(平滑過渡菜單欄案例)的相關(guān)資料,需要的朋友可以參考下2017-09-05CSS3與動(dòng)畫有關(guān)的屬性transition、animation、transform對(duì)比(史上最全
這篇文章主要介紹了CSS3與動(dòng)畫有關(guān)的屬性transition、animation、transform對(duì)比,通過瀏覽器兼容性,用法和對(duì)比更深刻的展示了彼此之間的異同,具體操作步驟大家可查看下文2017-08-18- 大家都知道過渡動(dòng)畫是動(dòng)畫的基礎(chǔ),在學(xué)習(xí)動(dòng)畫屬性之前,我們需要先了解過渡屬性transition,下面這篇文章通過示例代碼給大家詳細(xì)介紹了CSS3中的元素過渡屬性transition,有2016-11-30
CSS3中動(dòng)畫屬性transform、transition和animation屬性的區(qū)別
最近在項(xiàng)目中用到了CSS3中的動(dòng)畫屬性。無奈對(duì)于css3幾個(gè)新加的屬性不太熟悉,常常容易搞混。所以從網(wǎng)站研究了點(diǎn)資料,總結(jié)一下,方便有需要的朋友們可以參考學(xué)習(xí)。2016-09-25- css3中通過transition屬性可以實(shí)現(xiàn)一些簡單的動(dòng)畫過渡效果,今天通過本文給大家介紹下css3中transition屬性的示例代碼,感興趣的朋友跟隨小編一起看看吧2022-02-18