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

說(shuō)起來(lái)css動(dòng)畫(huà)是一個(gè)很尬的事，一方面因?yàn)楣居胏ss動(dòng)畫(huà)比較少，另一方面大部分開(kāi)發(fā)者習(xí)慣了用JavaScript來(lái)做動(dòng)畫(huà)，所以就導(dǎo)致了許多程序員比較排斥來(lái)學(xué)習(xí)css動(dòng)畫(huà)(至少我是)，但是一個(gè)不懂css動(dòng)畫(huà)的前端工程師不能稱(chēng)之為掌握css3，其實(shí)當(dāng)你真正學(xué)習(xí)css動(dòng)畫(huà)之后，你會(huì)被它的魅力所吸引的，它可以減少代碼量、提高性能。

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

transition 語(yǔ)法

值描述transition-durationtransition效果需要指定多少秒或毫秒才能完成transition-property指定CSS屬性的name，transition效果transition-timing-function指定transition效果的轉(zhuǎn)速曲線transition-delay定義transition效果開(kāi)始的時(shí)候

transition翻譯成中文是過(guò)渡的意思，顧名思義，它就是專(zhuān)門(mén)做過(guò)渡動(dòng)畫(huà)的，比如一些放大縮小，隱藏顯示等，下面我們一起來(lái)學(xué)習(xí)一下他的語(yǔ)法。

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為動(dòng)畫(huà)執(zhí)行所需的時(shí)間，這段代碼的意思就是鼠標(biāo)移入，div的寬高就會(huì)都變成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加動(dòng)畫(huà)，所以會(huì)呈現(xiàn)這種效果，同樣如果換成了height，那么將會(huì)是變高才有動(dòng)畫(huà)。

我們發(fā)現(xiàn)，第一個(gè)案例我們并沒(méi)有寫(xiě)transition-property，但是案例中width和height屬性是同時(shí)變化的，那是因?yàn)閠ransition-property的默認(rèn)值為all，只要不寫(xiě)這個(gè)屬性，那就是全部變化都會(huì)執(zhí)行動(dòng)畫(huà)。

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;}

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

值描述速度linear(默認(rèn)屬性)規(guī)定以相同速度開(kāi)始至結(jié)束的過(guò)渡效果(等于 cubic-bezier(0,0,1,1))。勻速ease規(guī)定慢速開(kāi)始，然后變快，然后慢速結(jié)束的過(guò)渡效果(cubic-bezier(0.25,0.1,0.25,1))。快-慢-慢ease-in規(guī)定以慢速開(kāi)始的過(guò)渡效果(等于 cubic-bezier(0.42,0,1,1))。快-快ease-out規(guī)定以慢速結(jié)束的過(guò)渡效果(等于 cubic-bezier(0,0,0.58,1))。慢-慢ease-in-out規(guī)定以慢速開(kāi)始和結(jié)束的過(guò)渡效果(等于 cubic-bezier(0.42,0,0.58,1))。慢-快-慢cubic-bezier(n,n,n,n)在 cubic-bezier 函數(shù)中定義自己的值。可能的值是 0 至 1 之間的數(shù)值。自定義

transition-delay：定義transition效果開(kāi)始的時(shí)候

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

---

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

transition: property duration timing-function delay;

div{ transition:all 1s ease-in-out 2s;}

那么這里的意思就是所有屬性都加入持續(xù)一秒，緩進(jìn)緩出的動(dòng)畫(huà)，并在兩秒鐘后開(kāi)始執(zhí)行。

結(jié)論

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

點(diǎn)擊【右上角，關(guān)注 子瑜說(shuō)IT 】持續(xù)更新IT資訊以及web前端開(kāi)發(fā)教學(xué)

8年開(kāi)發(fā)老碼農(nóng)福利贈(zèng)送：網(wǎng)頁(yè)制作，網(wǎng)站開(kāi)發(fā)，web前端開(kāi)發(fā)，從最零基礎(chǔ)開(kāi)始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移動(dòng)端小程序項(xiàng)目實(shí)戰(zhàn)【視頻＋工具＋系統(tǒng)路線圖】都有整理，送給每一位對(duì)編程感興趣的小伙伴

獲取方式：

右上角有私信，請(qǐng)私信發(fā)我：01 即可獲取！

總結(jié)

以上是生活随笔為你收集整理的css hover变成手_web前端入门到实战：彻底掌握css动画「transition」的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。