CSS3中Transition屬性詳解以及示例分享
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時(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í)例效果:
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;}
上一篇:詳細(xì)分析css float 屬性以及position:absolute 的區(qū)別
欄 目:CSS/HTML
下一篇:CSS可以做的幾個(gè)令你嘆為觀止的實(shí)例分享
本文標(biāo)題:CSS3中Transition屬性詳解以及示例分享
本文地址:http://mengdiqiu.com.cn/a1/CSS_HTML/11528.html
您可能感興趣的文章
- 04-02html5圖形,html5圖形縮放
- 04-02html5的canvas,html5的canvas的作用
- 01-11IE6/IE7/IE8/IE9中tbody的innerHTML不能賦值的完美解決方案
- 01-11表單中Readonly和Disabled的區(qū)別詳解
- 01-11CSS3+Js實(shí)現(xiàn)響應(yīng)式導(dǎo)航條
- 01-11完美實(shí)現(xiàn)浮動(dòng)元素橫排居中顯示
- 01-11CSS3實(shí)例分享之多重背景的實(shí)現(xiàn)(Multiple backgrounds)
- 01-11討論CSS中的各類居中方式
- 01-11li中插入img圖片間有空隙的解決方案
- 01-11如何使用CSS3畫出一個(gè)叮當(dāng)貓


閱讀排行
本欄相關(guān)
- 04-02html5算法,html5協(xié)議
- 04-02html5圖形,html5圖形縮放
- 04-02html5登錄模板,html5登錄注冊(cè)模板
- 04-02html5的例子,HTML示例
- 04-02html5的canvas,html5的canvas的作用
- 04-02關(guān)于html5 視頻代碼的信息
- 04-02html5chm手冊(cè),html操作手冊(cè)
- 04-02朋友圈html5,朋友圈發(fā)泄情緒的句子
- 04-02html5的新特性有哪些,HTML5的新特性有哪
- 04-02html5掃二維碼,html5調(diào)用手機(jī)攝像頭掃描
隨機(jī)閱讀
- 01-10C#中split用法實(shí)例總結(jié)
- 01-10delphi制作wav文件的方法
- 01-10使用C語言求解撲克牌的順子及n個(gè)骰子
- 01-11ajax實(shí)現(xiàn)頁面的局部加載
- 08-05織夢(mèng)dedecms什么時(shí)候用欄目交叉功能?
- 08-05DEDE織夢(mèng)data目錄下的sessions文件夾有什
- 01-10SublimeText編譯C開發(fā)環(huán)境設(shè)置
- 04-02jquery與jsp,用jquery
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文
- 08-05dedecms(織夢(mèng))副欄目數(shù)量限制代碼修改