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

　　看看我身上的屬性吧：

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

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

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

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

　　4. transition-timing-function：動畫過渡的動畫類型

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

　　效果圖

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

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

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

　　下面這樣寫，效果一樣喲

　　我還可以更厲害呢！

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

　　

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

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

　　看我的絕技 transition-timing-function

　　transition-timing-function是動畫運動的曲線，它一共有6個值。

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

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

　　· ease-in - 指定緩慢啟動的過渡效果

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

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

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

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

　　下面我們再來做一個更好看的效果，類似于彈鋼琴的效果，代碼如下：

　　html：

　　css：

　　請看效果圖： 

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

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

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