CSS3 過渡

通過 CSS3，我們可以在不使用 Flash 動(dòng)畫或 JavaScript 的情況下，當(dāng)元素從一種樣式變換為另一種樣式時(shí)為元素添加效果。

它如何工作？

CSS3 過渡是元素從一種樣式逐漸改變?yōu)榱硪环N的效果。
要實(shí)現(xiàn)這一點(diǎn)，必須規(guī)定兩項(xiàng)內(nèi)容：
??規(guī)定您希望把效果添加到哪個(gè) CSS 屬性上
??規(guī)定效果的時(shí)長(zhǎng)

實(shí)例

向?qū)挾?、高度和轉(zhuǎn)換添加過渡效果：

div {
    transition: width 2s, height 2s, transform 2s;
    -moz-transition: width 2s, height 2s, -moz-transform 2s;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
    -o-transition: width 2s, height 2s,-o-transform 2s;
}

點(diǎn)我測(cè)試

多項(xiàng)改變

如需向多個(gè)樣式添加過渡效果，請(qǐng)?zhí)砑佣鄠€(gè)屬性，由逗號(hào)隔開。

transition 屬性

瀏覽器支持

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 屬性。
Safari 支持替代的 -webkit-transition 屬性。
注釋：Internet Explorer 9 以及更早版本的瀏覽器不支持 transition 屬性。

定義和用法

transition 屬性是一個(gè)簡(jiǎn)寫屬性，用于設(shè)置四個(gè)過渡屬性：
??transition-property
??transition-duration
??transition-timing-function
??transition-delay
注釋：請(qǐng)始終設(shè)置 transition-duration屬性，否則時(shí)長(zhǎng)為 0，就不會(huì)產(chǎn)生過渡效果。

語法
transition: property duration timing-function delay;
值 描述
transition-property 規(guī)定設(shè)置過渡效果的 CSS 屬性的名稱。
transition-duration 規(guī)定完成過渡效果需要多少秒或毫秒。
transition-timing-function 規(guī)定速度效果的速度曲線。
transition-delay 定義過渡效果何時(shí)開始。
實(shí)例

把鼠標(biāo)指針放到 div 元素上，其寬度會(huì)從 100px 逐漸變?yōu)?300px：

div {
    width:100px;
    transition: width 2s;
    -moz-transition: width 2s; /* Firefox 4 */
    -webkit-transition: width 2s; /* Safari 和 Chrome */
    -o-transition: width 2s; /* Opera */
}

點(diǎn)擊測(cè)試

transition-property 屬性

瀏覽器支持

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-property 屬性。
Safari 支持替代的 -webkit-transition-property 屬性。
注釋：Internet Explorer 9 以及更早版本的瀏覽器不支持 transition-property 屬性。

定義和用法

transition-property 屬性規(guī)定應(yīng)用過渡效果的 CSS 屬性的名稱。（當(dāng)指定的 CSS 屬性改變時(shí)，過渡效果將開始）。
提示：過渡效果通常在用戶將鼠標(biāo)指針浮動(dòng)到元素上時(shí)發(fā)生。
注釋：請(qǐng)始終設(shè)置 transition-duration 屬性，否則時(shí)長(zhǎng)為 0，就不會(huì)產(chǎn)生過渡效果。

語法
transition-property: none|all|property;
值 描述
none 沒有屬性會(huì)獲得過渡效果。
all 所有屬性都將獲得過渡效果。
property 定義應(yīng)用過渡效果的 CSS 屬性名稱列表，列表以逗號(hào)分隔。
實(shí)例

把鼠標(biāo)指針放到 div 元素上，會(huì)產(chǎn)生帶有平滑改變?cè)貙挾鹊倪^渡效果：

div {
    transition-property:width;
    -moz-transition-property: width; /* Firefox 4 */
    -webkit-transition-property:width; /* Safari 和 Chrome */
    -o-transition-property:width; /* Opera */
}

點(diǎn)擊測(cè)試

transition-duration 屬性

瀏覽器支持

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-duration 屬性。
Safari 支持替代的 -webkit-transition-duration 屬性。
注釋：Internet Explorer 9 以及更早版本的瀏覽器不支持 transition-duration 屬性。

定義和用法

transition-duration 屬性規(guī)定完成過渡效果需要花費(fèi)的時(shí)間（以秒或毫秒計(jì)）。

語法
transition-duration: time;
值 描述
time 規(guī)定完成過渡效果需要花費(fèi)的時(shí)間（以秒或毫秒計(jì)）。默認(rèn)值是 0，意味著不會(huì)有效果。
實(shí)例
div {
    transition-duration: 5s;
    -moz-transition-duration: 5s; /* Firefox 4 */
    -webkit-transition-duration: 5s; /* Safari 和 Chrome */
    -o-transition-duration: 5s; /* Opera */
}

點(diǎn)擊測(cè)試

transition-timing-function 屬性

瀏覽器支持

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-timing-function 屬性。
Safari 支持替代的 -webkit-transition-timing-function 屬性。
注釋：Internet Explorer 9 以及更早版本的瀏覽器不支持 transition-timing-function 屬性。

定義和用法

transition-timing-function 屬性規(guī)定過渡效果的速度曲線。
該屬性允許過渡效果隨著時(shí)間來改變其速度。

語法
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
值 描述
linear 規(guī)定以相同速度開始至結(jié)束的過渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 規(guī)定慢速開始，然后變快，然后慢速結(jié)束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 規(guī)定以慢速開始的過渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 規(guī)定以慢速結(jié)束的過渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 規(guī)定以慢速開始和結(jié)束的過渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函數(shù)中定義自己的值?？赡艿闹凳?0 至 1 之間的數(shù)值。
實(shí)例1

為了更好地理解不同的函數(shù)值，請(qǐng)看下面帶有五個(gè)不同值的五個(gè)不同的 div 元素：

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
/* Firefox 4: */
#div1 {-moz-transition-timing-function: linear;}
#div2 {-moz-transition-timing-function: ease;}
#div3 {-moz-transition-timing-function: ease-in;}
#div4 {-moz-transition-timing-function: ease-out;}
#div5 {-moz-transition-timing-function: ease-in-out;}
/* Safari and Chrome: */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
/* Opera: */
#div1 {-o-transition-timing-function: linear;}
#div2 {-o-transition-timing-function: ease;}
#div3 {-o-transition-timing-function: ease-in;}
#div4 {-o-transition-timing-function: ease-out;}
#div5 {-o-transition-timing-function: ease-in-out;}

點(diǎn)擊測(cè)試

實(shí)例2

與上例相同，但通過 cubic-bezier 來規(guī)定速度曲線：

#div1 {transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Firefox 4: */
#div1 {-moz-transition-timing-function: cubic-bezier(0,0,0.25,1);}
#div2 {-moz-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-moz-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-moz-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-moz-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari and Chrome: */
#div1 {-webkit-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Opera: */
#div1 {-o-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-o-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-o-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-o-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-o-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

點(diǎn)擊測(cè)試

transition-delay 屬性

瀏覽器支持

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-delay 屬性。
Safari 支持替代的 -webkit-transition-delay 屬性。
注釋：Internet Explorer 9 以及更早版本的瀏覽器不支持 transition-delay 屬性。

定義和用法

transition-delay 屬性規(guī)定過渡效果何時(shí)開始。
transition-delay 值以秒或毫秒計(jì)。

語法
transition-delay: time;
值 描述
time 規(guī)定在過渡效果開始之前需要等待的時(shí)間，以秒或毫秒計(jì)。
實(shí)例

在過渡效果開始前等待 2 秒：

div {
    transition-delay: 2s;
    -moz-transition-delay: 2s; /* Firefox 4 */
    -webkit-transition-delay: 2s; /* Safari 和 Chrome */
    -o-transition-delay: 2s; /* Opera */
}

點(diǎn)擊測(cè)試

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 本文并非原創(chuàng)，屬于摘抄性質(zhì)，并有個(gè)人的加工。 一、過渡動(dòng)畫 過渡（transition）動(dòng)畫，就是從初始狀態(tài)過渡到...
    前端xiyoki閱讀 11,821評(píng)論 1贊 13
  • transition語法簡(jiǎn)寫 在CSS3中，我們可以使用transition屬性來將元素的某一個(gè)屬性從“一個(gè)屬性值...
    揮劍斬浮云閱讀 430評(píng)論 0贊 0
  • 深入理解CSS過渡屬性transition CSS中過渡屬性transition，可以在不需要JS的情況下實(shí)現(xiàn)簡(jiǎn)單...
    createK閱讀 4,761評(píng)論 0贊 6
  • 暗夜落寞沉似海 拔刀出鞘如雪霜 斬?cái)嗌砬盁_事 破衣瘦馬踏八荒
    最終幻象閱讀 410評(píng)論 6贊 10
  • 惦記了兩個(gè)月想要去吃的一家餐廳，到今天都還沒吃成。光惦記是沒用的，得行動(dòng)。
    桐城姑娘閱讀 222評(píng)論 0贊 2

友情鏈接更多精彩內(nèi)容