1、transition-property的語法
[css]
transition-property :all(所有屬性改變) || [attr] (指定要運(yùn)動(dòng)的樣式)|| none(沒有屬性改變)
2、transition-property的屬性值
(1)none：transition馬上停止執(zhí)行
(2)all：元素產(chǎn)生任何屬性值變化時(shí)都將執(zhí)行transition效果
(3)attr：指定要運(yùn)動(dòng)的樣式
一、transition-property——指定要運(yùn)動(dòng)的樣式
1、transition-property的語法
[css]
transition-property :all(所有屬性改變) || [attr] (指定要運(yùn)動(dòng)的樣式)|| none(沒有屬性改變)
2、transition-property的屬性值
(1)none：transition馬上停止執(zhí)行
(2)all：元素產(chǎn)生任何屬性值變化時(shí)都將執(zhí)行transition效果
(3)attr：指定要運(yùn)動(dòng)的樣式
二、transition-duration
transition-duration是指定元素轉(zhuǎn)換過程的持續(xù)時(shí)間，單位為秒(s)。transition-duration可以作用于所有元素，包括:before和:after
偽元素。其默認(rèn)值是0，也就是變換時(shí)是即時(shí)的。
三、transition-delay—— 延遲時(shí)間
transition-delay是用來指定一個(gè)動(dòng)畫開始執(zhí)行的時(shí)間，也就是說當(dāng)改變?cè)貙傩灾岛蠖嚅L(zhǎng)時(shí)間開始執(zhí)行transition效果，單位為s(秒)
，其使用和transition-duration極其相似，也可以作用于所有元素，包括:before和:after偽元素。 默認(rèn)大小是"0"，也就是變換立即執(zhí)行，
沒有延遲。
四、transition-timing-function——指定運(yùn)動(dòng)形式
transition-timing-function ： ease(逐漸變慢) | linear(勻速) | ease-in(加速) | ease-out(減速) | ease-in-out(先加速然后減
速) | cubic-bezier(該值允許你去自定義一個(gè)時(shí)間曲線)(number, number, number, number>)
五、transition的綜合寫法
[css]
元素選擇器{transition:運(yùn)動(dòng)的樣式 持續(xù)時(shí)間 運(yùn)動(dòng)形式 延遲時(shí)間;}
六、transition的綜合兼容寫法
1、Mozilla內(nèi)核
[css]
元素選擇器{-moz-transition:運(yùn)動(dòng)的樣式 持續(xù)時(shí)間 運(yùn)動(dòng)形式 延遲時(shí)間;}
2、Webkit內(nèi)核
[css]
元素選擇器{-webkit-transition:運(yùn)動(dòng)的樣式 持續(xù)時(shí)間 運(yùn)動(dòng)形式 延遲時(shí)間;}
3、Opera內(nèi)核
[css]
元素選擇器{-o-transition:運(yùn)動(dòng)的樣式 持續(xù)時(shí)間 運(yùn)動(dòng)形式 延遲時(shí)間;}
4、W3C 標(biāo)準(zhǔn)
[css]
元素選擇器{transition:運(yùn)動(dòng)的樣式 持續(xù)時(shí)間 運(yùn)動(dòng)形式 延遲時(shí)間;}
實(shí)例效果：
復(fù)制代碼 代碼如下:
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;}
您可能感興趣的文章:- filters.revealTrans.Transition使用方法小結(jié)
- 全面解析Bootstrap中transition、affix的使用方法
- 實(shí)例講解iOS中的CATransition轉(zhuǎn)場(chǎng)動(dòng)畫使用
- JS實(shí)現(xiàn)動(dòng)畫兼容性的transition和transform實(shí)例分析
- jQuery+css3實(shí)現(xiàn)文字跟隨鼠標(biāo)的上下抖動(dòng)
- js實(shí)現(xiàn)的文字橫向無間斷滾動(dòng)
- 淺析js 文字滾動(dòng)效果
- 基于Jquery的文字滾動(dòng)跑馬燈插件(一個(gè)頁面多個(gè)滾動(dòng)區(qū))
- 文字不間斷滾動(dòng)(上下左右)實(shí)例代碼
- 利用transition實(shí)現(xiàn)文字上下抖動(dòng)的效果
