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

　　看看我身上的屬性吧：

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

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

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

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

　　4. transition-timing-function：動(dòng)畫過渡的動(dòng)畫類型

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

　　效果圖

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

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

　　這樣瘦身的我是不是就很可愛了呢？

　　下面這樣寫，效果一樣喲

　　我還可以更厲害呢！

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

　　

　　那大家明白這種寫法嗎？試一試？

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

　　看我的絕技 transition-timing-function

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

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

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

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

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

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

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

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

　　下面我們?cè)賮碜鲆粋€(gè)更好看的效果，類似于彈鋼琴的效果，代碼如下：

　　html：

　　css：

　　請(qǐng)看效果圖： 

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

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

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