transition過(guò)渡動(dòng)畫(huà)的自述

　　Hi，大家好！我是transition，經(jīng)常有小伙伴把我和隔壁animation搞混，下面我就好好的介紹一下自己，讓大家能明白transition過(guò)渡動(dòng)畫(huà)到底是干啥的。

　　看看我身上的屬性吧：

　　大家總是叫我transition，其實(shí)我有四個(gè)重要的部分組成，下面一一聽(tīng)我介紹：

　　1. transition-property:需要參與過(guò)渡的屬性，例如：width、height、background...

　　2. transition-duration:過(guò)渡動(dòng)畫(huà)的持續(xù)時(shí)間，單位秒s或毫秒ms

　　3. transition-delay：延遲過(guò)渡的時(shí)間，單位秒s或毫秒ms

　　4. transition-timing-function：動(dòng)畫(huà)過(guò)渡的動(dòng)畫(huà)類(lèi)型

　　我可以以屬性的形式被定義

　　效果圖

　　效果出來(lái)了我是不是很厲害？可是上面的我由于屬性太多有點(diǎn)不招新手同學(xué)待見(jiàn) o(╥﹏╥)o

　　其實(shí)平時(shí)的我是下面這種形式出現(xiàn)在代碼中的：

　　這樣瘦身的我是不是就很可愛(ài)了呢？

　　下面這樣寫(xiě)，效果一樣喲

　　我還可以更厲害呢！

　　通常情況下，我會(huì)讓一些元素在變化時(shí)產(chǎn)生動(dòng)畫(huà)效果，但是我得和好搭檔hover(鼠標(biāo)懸停)一起干活，先來(lái)看一段代碼：

　　

　　那大家明白這種寫(xiě)法嗎？試一試？

　　這里就是應(yīng)用過(guò)渡動(dòng)畫(huà)實(shí)現(xiàn)的效果，多個(gè)屬性是依次執(zhí)行動(dòng)畫(huà)效果的，其實(shí)就是巧妙應(yīng)用了過(guò)渡延遲屬性，讓上一個(gè)屬性執(zhí)行完了再接著下面一個(gè)，是不是很有趣鴨。

　　看我的絕技 transition-timing-function

　　transition-timing-function是動(dòng)畫(huà)運(yùn)動(dòng)的曲線，它一共有6個(gè)值。

　　· ease - 指定一個(gè)緩慢開(kāi)始，然后快速，然后慢慢結(jié)束的過(guò)渡效果(這是默認(rèn)值)

　　· linear - 指定從開(kāi)始到結(jié)束以相同速度的轉(zhuǎn)換效果

　　· ease-in - 指定緩慢啟動(dòng)的過(guò)渡效果

　　· ease-out - 指定一個(gè)緩慢結(jié)束的過(guò)渡效果

　　· ease-in-out - 指定開(kāi)始和結(jié)束緩慢的過(guò)渡效果

　　· cubic-bezier(n,n,n,n) - 在一個(gè)三次貝塞爾函數(shù)中定義您自己的值

　　看看我都能干什么吧！復(fù)雜一點(diǎn)的例子

　　下面我們?cè)賮?lái)做一個(gè)更好看的效果，類(lèi)似于彈鋼琴的效果，代碼如下：

　　html：

　　css：

　　請(qǐng)看效果圖： 

　　這個(gè)效果還不錯(cuò)吧，運(yùn)用了過(guò)渡動(dòng)畫(huà)結(jié)合了定位相關(guān)的綜合應(yīng)用。最后再次提醒，你想要用我做過(guò)渡動(dòng)畫(huà)，一定要結(jié)合事件觸發(fā)哦，最常用的方式就是鼠標(biāo)的hover。

　　今天給大家介紹了transition過(guò)渡動(dòng)畫(huà)，相信大家都知道我是干啥工作的了，下次再給大家介紹我隔壁的animation。更多關(guān)于“前端培訓(xùn)”的問(wèn)題，歡迎咨詢(xún)千鋒教育在線名師。千鋒教育多年辦學(xué)，課程大綱緊跟企業(yè)需求，更科學(xué)更嚴(yán)謹(jǐn)，每年培養(yǎng)泛IT人才近2萬(wàn)人。不論你是零基礎(chǔ)還是想提升，都可以找到適合的班型，千鋒教育隨時(shí)歡迎你來(lái)試聽(tīng)。

　　注：本文部分文字和圖片來(lái)源于網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系刪除。版權(quán)歸原作者所有!