html中transition動(dòng)畫效果怎么用

這篇文章主要介紹html中transition動(dòng)畫效果怎么用，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

　　一、transition過(guò)渡動(dòng)畫

　　當(dāng)元素的樣式從一種狀態(tài)變成另一種狀態(tài)的時(shí)候，產(chǎn)生平滑的過(guò)渡效果。

　　注意：transition只能在兩種不同的狀態(tài)之間產(chǎn)生過(guò)渡動(dòng)畫，不能有兩種以上的狀態(tài)，這和animation動(dòng)畫不一樣，所以論武力值，transition只能算閹割版的animation。

　　可以把第一個(gè)狀態(tài)表示為初始值。第二個(gè)狀態(tài)表示為結(jié)束值。

　　比如顏色從黑色變成白色，寬度從100px變成200px，透明度從1變成0.5等等，這都屬于一個(gè)樣式狀態(tài)的變化。

　　所以要對(duì)一個(gè)元素做過(guò)渡動(dòng)畫，必須有兩個(gè)要素要滿足：

　　1、哪個(gè)對(duì)象要做動(dòng)畫。

　　2、動(dòng)畫要執(zhí)行多長(zhǎng)時(shí)間。因?yàn)槟J(rèn)值是0，所以必須設(shè)置運(yùn)動(dòng)的時(shí)長(zhǎng)。

　　什么時(shí)候開始執(zhí)行動(dòng)畫呢？那就是當(dāng)樣式的值發(fā)生改變的時(shí)候，最初級(jí)的運(yùn)用就是利用:hover偽類來(lái)實(shí)現(xiàn)效果。

　　因?yàn)榧嫒菪缘膯?wèn)題，低版本瀏覽器請(qǐng)加上前綴。a{

　　color:#333;

　　-moz-transition:?.2s;

　　-webkit-transition:?.2s;

　　-o-transition:?.2s;

　　transition:.2s;?

　　}

　　a:hover{

　　color:#F78500;

　　}

　　二、transition的屬性transition-property ? 執(zhí)行過(guò)渡動(dòng)畫的樣式屬性，默認(rèn)值為all。

　　transition-delay ? 延遲多少時(shí)間執(zhí)行過(guò)渡動(dòng)畫，默認(rèn)值0。

　　transition-duration ? 執(zhí)行過(guò)渡動(dòng)畫花費(fèi)的時(shí)間，默認(rèn)值為0。

　　transition-timing-function ?動(dòng)畫執(zhí)行的加減速貝塞爾曲線。默認(rèn)值為ease。

　　1、transition-property支持的屬性。

　　能夠用具體的數(shù)字類的值表示的屬性。不是所有的css屬性都可以執(zhí)行動(dòng)畫的，比如display就不可以，而visibility就可以。

　　width、height大小類的屬性，color類的屬性(background-color/border-color/color等)，margin、padding邊距類的屬性，position定位類的屬性(left、top、background-position等),以及z-index/text-shadow/text-indent/opacity/visibility/transform等。

　　2、transition-timing-function 時(shí)間曲線。

　　這個(gè)屬性非常的強(qiáng)大，單獨(dú)拿出一篇文章來(lái)講解都不為過(guò)。數(shù)學(xué)好的人應(yīng)該都能記住貝塞爾曲線。在這里用貝塞爾曲線來(lái)表示運(yùn)動(dòng)的加減速等規(guī)律。

　　我們常用的也就是ease-in/ease-out/linear等值。其實(shí)，它的語(yǔ)法規(guī)則可以有那么多↓

　　transition-timing-function:?ease;

　　transition-timing-function:?ease-in;

　　transition-timing-function:?ease-out;

　　transition-timing-function:?ease-in-out;

　　transition-timing-function:?linear;

　　transition-timing-function:?step-start;

　　transition-timing-function:?step-end;

　　transition-timing-function:?steps(4,?end);

　　transition-timing-function:?cubic-bezier(0.1,?0.7,?1.0,?0.1);

　　transition-timing-function:?frames(10);

　　transition-timing-function:?ease,?step-start,?cubic-bezier(0.1,?0.7,?1.0,?0.1);

　　transition-timing-function:?inherit;

　　transition-timing-function:?initial;

　　transition-timing-function:?unset;

　　運(yùn)動(dòng)速度的變化很微妙，通過(guò)直觀的在線效果更好理解，可以用這個(gè)在線工具直觀的查看各種不同曲線產(chǎn)生的效果。

　　還有在線生成transition動(dòng)畫代碼的工具，真的是懶人福音。

　　三、案例

　　1、鼠標(biāo)經(jīng)過(guò)顏色的變化

　　See the Pen transition過(guò)渡動(dòng)畫案例1 by zhaolanzhen (@mrszhao) on CodePen.

　　2、鼠標(biāo)經(jīng)過(guò)顯示和隱藏，結(jié)構(gòu)有嵌套關(guān)系的下拉菜單，這個(gè)案例就利用了visibility和opacity結(jié)合完成顯示和隱藏的效果，而用display:none就不可以。

　　See the Pen transition過(guò)渡動(dòng)畫案例2 by zhaolanzhen (@mrszhao) on CodePen.

　　3、鼠標(biāo)經(jīng)過(guò)顯示和隱藏，結(jié)構(gòu)沒有嵌套關(guān)系，用純CSS實(shí)現(xiàn)的話，鼠標(biāo)移開下面的對(duì)象也會(huì)消失，不能像下拉菜單那樣還能把鼠標(biāo)移到下面的元素上。

　　See the Pen transition過(guò)渡動(dòng)畫案例3 by zhaolanzhen (@mrszhao) on CodePen.

　　4、鼠標(biāo)經(jīng)過(guò)顯示和隱藏，結(jié)構(gòu)沒有嵌套，想鼠標(biāo)移開還能移到下面對(duì)象上，需要使用js的定時(shí)器。

　　See the Pen transition過(guò)渡動(dòng)畫案例4 by zhaolanzhen (@mrszhao) on CodePen.

以上是“html中transition動(dòng)畫效果怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！