立刻就2020年了,不知道小夥伴們今年學習了css3動畫了嗎?css
提及來css動畫是一個很尬的事,一方面由於公司用css動畫比較少,另外一方面大部分開發者習慣了用JavaScript來作動畫,因此就致使了許多程序員比較排斥來學習css動畫(至少我是),可是一個不懂css動畫的前端工程師不能稱之爲掌握css3,其實當你真正學習css動畫以後,你會被它的魅力所吸引的,它能夠減小代碼量、提升性能。前端
話很少說,立刻和我一塊兒去學習今天的主角transition吧!css3
值 | 描述 |
---|---|
transition-duration | transition效果須要指定多少秒或毫秒才能完成 |
transition-property | 指定CSS屬性的name,transition效果 |
transition-timing-function | 指定transition效果的轉速曲線 |
transition-delay | 定義transition效果開始的時候 |
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
css3動畫
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
,只要不寫這個屬性,那就是所有變化都會執行動畫。函數
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 之間的數值。 | 自定義 |
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。