CSS3中Transition屬性詳解以及示例分享
1、transition-property的語法
[css]
transition-property :all(所有屬性改變) || [attr] (指定要運動的樣式)|| none(沒有屬性改變)
2、transition-property的屬性值
(1)none:transition馬上停止執(zhí)行
(2)all:元素產生任何屬性值變化時都將執(zhí)行transition效果
(3)attr:指定要運動的樣式
一、transition-property——指定要運動的樣式
1、transition-property的語法
[css]
transition-property :all(所有屬性改變) || [attr] (指定要運動的樣式)|| none(沒有屬性改變)
2、transition-property的屬性值
(1)none:transition馬上停止執(zhí)行
(2)all:元素產生任何屬性值變化時都將執(zhí)行transition效果
(3)attr:指定要運動的樣式
二、transition-duration
transition-duration是指定元素轉換過程的持續(xù)時間,單位為秒(s)。transition-duration可以作用于所有元素,包括:before和:after
偽元素。其默認值是0,也就是變換時是即時的。
三、transition-delay—— 延遲時間
transition-delay是用來指定一個動畫開始執(zhí)行的時間,也就是說當改變元素屬性值后多長時間開始執(zhí)行transition效果,單位為s(秒)
,其使用和transition-duration極其相似,也可以作用于所有元素,包括:before和:after偽元素。 默認大小是"0",也就是變換立即執(zhí)行,
沒有延遲。
四、transition-timing-function——指定運動形式
transition-timing-function : ease(逐漸變慢) | linear(勻速) | ease-in(加速) | ease-out(減速) | ease-in-out(先加速然后減
速) | cubic-bezier(該值允許你去自定義一個時間曲線)(number, number, number, number>)
五、transition的綜合寫法
[css]
元素選擇器{transition:運動的樣式 持續(xù)時間 運動形式 延遲時間;}
六、transition的綜合兼容寫法
1、Mozilla內核
[css]
元素選擇器{-moz-transition:運動的樣式 持續(xù)時間 運動形式 延遲時間;}
2、Webkit內核
[css]
元素選擇器{-webkit-transition:運動的樣式 持續(xù)時間 運動形式 延遲時間;}
3、Opera內核
[css]
元素選擇器{-o-transition:運動的樣式 持續(xù)時間 運動形式 延遲時間;}
4、W3C 標準
[css]
元素選擇器{transition:運動的樣式 持續(xù)時間 運動形式 延遲時間;}
實例效果:
復制代碼 代碼如下:
a{transition:all .6s ease-in-out;-webkit-transition:all .6s ease-in-out;-moz-transition:all .6s ease-in-out;-o-transition:all .6s ease-in-out;-ms-transition:all .6s ease-in-out;}
相關文章:
1. 低版本IE正常運行HTML5+CSS3網站的3種解決方案2. js+css3實現(xiàn)簡單時鐘特效3. 利用CSS3新特性創(chuàng)建透明邊框三角4. CSS3實例分享之多重背景的實現(xiàn)(Multiple backgrounds)5. CSS3實現(xiàn)動態(tài)翻牌效果 仿百度貼吧3D翻牌一次動畫特效6. JS+css3實現(xiàn)幻燈片輪播圖7. CSS3+Js實現(xiàn)響應式導航條8. 如何使用CSS3畫出一個叮當貓9. 《CSS3實戰(zhàn)》筆記--漸變設計(一)10. 解析使用useDark(),發(fā)現(xiàn)transition 動畫失效