寫在前面
已經2020年了，不知道小夥伴們今年學習了css3動畫了嗎？
說起來css動畫是一個很尬的事，一方面因為公司用css動畫比較少，另一方面大部分開發者習慣了用JavaScript來做動畫，所以就導致了許多程式設計師比較排斥來學習css動畫（至少我是），但是一個不懂css動畫的前端工程師不能稱之為掌握css3，其實當你真正學習css動畫之後，你會被它的魅力所吸引的，它可以減少程式碼量、提高效能。
這是一個系列文章，小夥伴可以點選連結進行學習~
前端深入之css篇丨2020年，徹底掌握css動畫【transition】
前端深入之css篇丨2020年，徹底掌握css動畫【animation】
前端深入之css篇丨2020年，徹底掌握css動畫【transform】
前端深入之css篇丨初探【transform】，手把手帶你實現1024程式設計師節動畫
話不多說，馬上和我一起去學習今天的主角transition吧！
transition 語法
| 值 | 描述 |
|---|---|
| transition-duration | transition效果需要指定多少秒或毫秒才能完成 |
| transition-property | 指定CSS屬性的name，transition效果 |
| transition-timing-function | 指定transition效果的轉速曲線 |
| transition-delay | 定義transition效果開始的時候 |
transition翻譯成中文是過渡的意思，顧名思義，它就是專門做過渡動畫的，比如一些放大縮小，隱藏顯示等，下面我們一起來學習一下他的語法。
transition-duration：transition效果需要指定多少秒或毫秒才能完成
div{
width:100px;
height:100px;
border-radius: 50%;
background:#f40;
transition-duration:1s;
}
div:hover{
height:150px;
width:150px;
}
複製程式碼這是transition最基本的用法，transition-duration為動畫執行所需的時間，這段程式碼的意思就是滑鼠移入，div的寬高就會都變成150px
transition-property：指定CSS屬性的name，transition效果
div{
width:100px;
height:100px;
border-radius: 50%;
background:#f40;
transition-duration:1s;
transition-property:width;
}
div:hover{
height:150px;
width:150px;
}
複製程式碼這裡transition-property值僅為width，意思是隻給width加動畫，所以會呈現這種效果，同樣如果換成了height，那麼將會是變高才有動畫。
我們發現，第一個案例我們並沒有寫transition-property，但是案例中width和height屬性是同時變化的，那是因為transition-property的預設值為all，只要不寫這個屬性，那就是全部變化都會執行動畫。
transition-timing-function：指定transition效果的轉速曲線
div{
width:100px;
height:50px;
background:#f40;
transition-duration:2s;
transition-timing-function:ease-in-out;
}
div:hover{
width:250px;
}
複製程式碼transition-timing-function的作用就是改變動畫在每一幀的快慢。這裡transition-timing-function僅展示值為ease-in-out的動畫效果，可以理解為慢-快-慢。其他的不做展示，可以參考下表進行理解。
| 值 | 描述 | 速度 |
|---|---|---|
| linear（預設屬性） | 規定以相同速度開始至結束的過渡效果（等於 cubic-bezier(0,0,1,1)）。 | 勻速 |
| ease | 規定慢速開始，然後變快，然後慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 | 快-慢-慢 |
| ease-in | 規定以慢速開始的過渡效果（等於 cubic-bezier(0.42,0,1,1)）。 | 快-快 |
| ease-out | 規定以慢速結束的過渡效果（等於 cubic-bezier(0,0,0.58,1)）。 | 慢-慢 |
| ease-in-out | 規定以慢速開始和結束的過渡效果（等於 cubic-bezier(0.42,0,0.58,1)）。 | 慢-快-慢 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函式中定義自己的值。可能的值是 0 至 1 之間的數值。 | 自定義 |
transition-delay：定義transition效果開始的時候
div{
width:100px;
height:100px;
border-radius: 50%;
background:#f40;
transition-duration:1s;
transition-delay:1s;
}
div:hover{
height:150px;
width:150px;
}
複製程式碼這裡transition-delay的值為1s，意思是動畫將在延遲一秒後執行。
今天我們一共學習了四個屬性值，他們都是屬於transition屬性的，這裡給出屬性值在transition中的簡寫方式。
transition: property duration timing-function delay;
div{
transition:all 1s ease-in-out 2s;
}
複製程式碼那麼這裡的意思就是所有屬性都加入持續一秒，緩進緩出的動畫，並在兩秒鐘後開始執行。
結論
經過以上的學習，相信你已經初步瞭解了transition的用法，transition用來過渡再好不過了，但是僅靠它做不了一些炫酷的動畫，我將在接下來的文章繼續為你講解animation（動畫）、translate（移動）以及transform（變形），跟進我的腳步吧，跟我一起在2020前掌握css動畫！
結語
以上就是本文章的全部內容了，如果有不正確的地方歡迎指正。
感謝您的閱讀，如果感覺有用不妨點贊/轉發。
前端深入系列是一個踩坑系列，是由我本人對工作和學習中所遇到的問題和踩過的坑的一個探索與總結，在此記錄分享出去，同時也是對自我技能的一個反思和追問。
前端路漫，踩坑不斷。
前端深入系列持續更新中……
以上2019-10-16。