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

　　看看我身上的屬性吧：

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

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

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

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

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

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

　　效果圖

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

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

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

　　下面這樣寫，效果一樣喲

　　我還可以更厲害呢！

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

　　

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

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

　　看我的絕技 transition-timing-function

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

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

　　· linear - 指定從開始到結束以相同速度的轉換效果

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

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

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

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

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

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

　　html：

　　css：

　　請看效果圖： 

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

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

　　注：本文部分文字和圖片來源于網絡，如有侵權，請聯系刪除。版權歸原作者所有!