web前端入門到實戰(zhàn)：徹底掌握css動畫【transition】

馬上就2020年了，不知道小伙伴們今年學(xué)習(xí)了css3動畫了嗎？

說起來css動畫是一個很尬的事，一方面因為公司用css動畫比較少，另一方面大部分開發(fā)者習(xí)慣了用JavaScript來做動畫，所以就導(dǎo)致了許多程序員比較排斥來學(xué)習(xí)css動畫（至少我是），但是一個不懂css動畫的前端工程師不能稱之為掌握css3，其實當你真正學(xué)習(xí)css動畫之后，你會被它的魅力所吸引的，它可以減少代碼量、提高性能。

話不多說，馬上和我一起去學(xué)習(xí)今天的主角transition吧！

transition 語法

transition翻譯成中文是過渡的意思，顧名思義，它就是專門做過渡動畫的，比如一些放大縮小，隱藏顯示等，下面我們一起來學(xué)習(xí)一下他的語法。

transition-duration：transition效果需要指定多少秒或毫秒才能完成

div{
    width:100px;
    height:100px;
    border-radius: 50%;
    background:#f40;
    transition-duration:1s;
}
div:hover{
    height:150px;    
    width:150px;
}
web前端開發(fā)學(xué)習(xí)Q-q-u-n： 784783012 ，分享學(xué)習(xí)的方法和需要注意的小細節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細的前端項目實戰(zhàn)教學(xué)視頻）

這是transition最基本的用法，transition-duration為動畫執(zhí)行所需的時間，這段代碼的意思就是鼠標移入，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加動畫，所以會呈現(xiàn)這種效果，同樣如果換成了height，那么將會是變高才有動畫。

我們發(fā)現(xiàn)，第一個案例我們并沒有寫transition-property，但是案例中width和height屬性是同時變化的，那是因為transition-property的默認值為all，只要不寫這個屬性，那就是全部變化都會執(zhí)行動畫。

transition-timing-function：指定transition效果的轉(zhuǎn)速曲線

div{
    width:100px;
    height:50px;
    background:#f40;
    transition-duration:2s;
    transition-timing-function:ease-in-out;
}
div:hover{
    width:250px;
}
web前端開發(fā)學(xué)習(xí)Q-q-u-n： 784783012 ，分享學(xué)習(xí)的方法和需要注意的小細節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細的前端項目實戰(zhàn)教學(xué)視頻）

transition-timing-function的作用就是改變動畫在每一幀的快慢。這里transition-timing-function僅展示值為ease-in-out的動畫效果，可以理解為慢-快-慢。其他的不做展示，可以參考下表進行理解。

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，意思是動畫將在延遲一秒后執(zhí)行。

今天我們一共學(xué)習(xí)了四個屬性值，他們都是屬于transition屬性的，這里給出屬性值在transition中的簡寫方式。

transition: property duration timing-function delay;

div{
    transition:all 1s ease-in-out 2s;
}
web前端開發(fā)學(xué)習(xí)Q-q-u-n： 784783012 ，分享學(xué)習(xí)的方法和需要注意的小細節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細的前端項目實戰(zhàn)教學(xué)視頻）

那么這里的意思就是所有屬性都加入持續(xù)一秒，緩進緩出的動畫，并在兩秒鐘后開始執(zhí)行。

結(jié)論

經(jīng)過以上的學(xué)習(xí)，相信你已經(jīng)初步了解了transition的用法，transition用來過渡再好不過了，但是僅靠它做不了一些炫酷的動畫，我將在接下來的文章繼續(xù)為你講解animation（動畫）、translate（移動）以及transform（變形），跟進我的腳步吧，跟我一起在2020年前掌握css動畫！