web前端入門到實戰:徹底掌握css動畫【transition】

馬上就2020年了,不知道小夥伴們今年學習了css3動畫了嗎?

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

話不多說,馬上和我一起去學習今天的主角transition吧!

transition 語法

描述
transition-duration transition效果需要指定多少秒或毫秒才能完成
transition-property 指定CSS屬性的name,transition效果
transition-timing-function 指定transition效果的轉速曲線
transition-delay 定義transition效果開始的時候

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

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

web前端入門到實戰:徹底掌握css動畫【transition】

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

這是transition最基本的用法,transition-duration爲動畫執行所需的時間,這段代碼的意思就是鼠標移入,div的寬高就會都變成150px

transition-property:指定CSS屬性的name,transition效果

web前端入門到實戰:徹底掌握css動畫【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,但是案例中widthheight屬性是同時變化的,那是因爲transition-property的默認值爲all,只要不寫這個屬性,那就是全部變化都會執行動畫。

transition-timing-function:指定transition效果的轉速曲線

web前端入門到實戰:徹底掌握css動畫【transition】

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

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效果開始的時候

web前端入門到實戰:徹底掌握css動畫【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;
}
web前端開發學習Q-q-u-n: 784783012 ,分享學習的方法和需要注意的小細節,不停更新最新的教程和學習方法(詳細的前端項目實戰教學視頻)

那麼這裏的意思就是所有屬性都加入持續一秒,緩進緩出的動畫,並在兩秒鐘後開始執行。

結論

經過以上的學習,相信你已經初步瞭解了transition的用法,transition用來過渡再好不過了,但是僅靠它做不了一些炫酷的動畫,我將在接下來的文章繼續爲你講解animation(動畫)translate(移動)以及transform(變形),跟進我的腳步吧,跟我一起在2020年前掌握css動畫!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章