摘要:規定動畫的名稱。規定動畫是否在下一周期逆向地播放。定義動畫各個階段的狀態的代碼段。動畫的周期時間。動畫的循環次數。動畫完成后,元素保持動畫最后的狀態。重要提示請不要忘記推薦和收藏搜索動畫詳解
CSS3 提供給了我們非常多的轉換函數:
2D: translate, rotate, scale, skew.
3D: translate3d, rotate3d, scale3d, skew3d.
只需要將這些函數作為transform屬性的值,就可以設置相應的效果。
CSS3 動畫則是將這些效果以及其他CSS屬性按照你設定的方式來進行互相轉變。
1. 動畫相關屬性屬性 | 描述
--------------------------- | ------------------------------------------------------------------------------
@keyframes | 定義動畫各個階段的狀態的代碼段
animation | 所有動畫屬性的簡寫屬性,除了 animation-play-state 和 animation-fill-mode 屬性。
animation-name | 規定 @keyframes 動畫的名稱。
animation-duration | 規定動畫完成一個周期所花費的秒或毫秒。默認是 0。
animation-timing-function | 規定動畫的速度曲線。默認是 ease。
animation-delay | 規定動畫何時開始。默認是 0。
animation-iteration-count | 規定動畫被播放的次數。默認是 1。
animation-direction | 規定動畫是否在下一周期逆向地播放。默認是 normal。
animation-play-state | 規定動畫是否正在運行或暫停。默認是 running。
animation-fill-mode | 規定元素在動畫開始前和完成后的狀態,默認是 none。
定義動畫各個階段的狀態的代碼段。比如開始態,結束態,中間態(使用百分比表示)。
@keyframes exampleName { from { transform: rotateY(0deg); background: #000000; } 50% { transform: rotateY(180deg); background: #00fa7e; } to { transform: rotateY(0deg); background: #008dff; } }animation-name
使用 @keyframes 定義的狀態集合名稱,如上面的 exampleName。
animation-duration動畫的周期時間。單位可以是秒(s),也可以是毫秒(ms)。
animation-timing-function動畫變化速度函數,有如下幾種選項:
linear: 速度不變。cubic-bezier(0,0,1,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)
ease: 與 ease-in-out 基本相同,但是開始稍微比結束快一點兒。cubic-bezier(0.25,0.1,0.25,1)
cubic-bezier(x1, y1, x2, y2): 使用三次貝塞爾函數作為速度函數。
animation-delaycubic-bezier曲線測試調試網站:cubic-bezier
動畫開始之前等待的時間。單位可以是秒(s),也可以是毫秒(ms)。
animation-iteration-count動畫的循環次數。可以是具體的次數,也可以是 infinite,表示無限循環播放。
animation-direction動畫循環的方向:
normal: 正向播放。
reverse: 反向播放。
alternate: 正向播放與反向播放交替進行。
animation以上6個屬性可以使用這一個屬性來表示,格式為:
animate: name duration timing-function delay iteration-count direction;animation-play-state
控制動畫的狀態,有播放(running)和暫停(paused)兩種狀態。
animation-fill-mode規定元素在動畫開始前和完成后的狀態。
none: 元素在動畫前后的狀態和動畫沒有聯系。
forwards: 動畫完成后,元素保持動畫最后的狀態。
backwards: 動畫開始前,元素保持動畫開始的狀態。
both: forwards 和 backwards 的結合。
2. transitionCSS3 除了 animation 相關的屬性以外,還提供給我們一個 transition 屬性,格式為:
transition: propertyName duration [timing-function] [delay], ...;
大家可能已經也看出來了,其實 transition 就是 @keyframes 只有 from 和 to 兩個狀態,并且播放次數為1,且不能暫停的 animation。
舉個例子,當鼠標放到一個 div 上的時候,它旋轉90度,并且背景從黑色變為灰色,字體從白色變為黑色。
#division2 { width: 300px; height: 100px; margin-top: 50px; font-size: 2em; text-align: center; line-height: 100px; color: #FFF; background: #000; transition: transform 2s linear 0s, background 2s linear 0s, color 2s linear 0s; } #division2:hover { background: #cccdd1; color: #000; transform: rotate(90deg); }3. Demo
[重要提示]請不要忘記推薦和收藏 (╯‵□′)╯︵ ┴─┴
git clone https://github.com/JasonKid/fezone.git
搜索 動畫詳解
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/111130.html
摘要:定義動畫的名稱。動畫時長的百分比。在中,我們以百分比來規定改變發生的時間,或者通過關鍵詞和,等價于和。其中,是動畫的開始時間,動畫的結束時間。規定完成動畫所花費的時間,以秒或毫秒計。動畫應該正常播放。 贊助我以寫出更好的文章,give me a cup of coffee? 2017最新最全前端面試題 在css3中,我們可以通過@keyframes創建關鍵幀動畫效果。我們需要將@ke...
摘要:動畫屬性詳解關于制作動畫的幾個屬性變形轉換和動畫。一屬性旋轉中心為原點扭曲傾斜縮放移動矩陣變形。各個屬性的用法旋轉其中表示度。承載動畫的另一個屬性。定義動畫的名稱。一個或多個合法的樣式屬性。 css3動畫屬性詳解: 關于CSS3制作動畫的幾個屬性:變形(transform)、轉換(transition)和動畫(animation)。 一、transform 屬性: 旋轉rotate(中...
摘要:歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑開啟性能優化之旅高性能滾動及頁面渲染優化理論寫法對壓縮率的影響唯快不破應用的個優化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優化動 歡迎來我的個人站點 性能優化 其他 優化瀏覽器關鍵渲染路徑 - 開啟性能優化之旅 高性能滾動 scroll 及頁面渲染優化 理論 | HTML寫法...
閱讀 3200·2021-11-25 09:43
閱讀 3206·2021-11-23 09:51
閱讀 3518·2019-08-30 13:08
閱讀 1569·2019-08-29 12:48
閱讀 3594·2019-08-29 12:26
閱讀 397·2019-08-28 18:16
閱讀 2561·2019-08-26 13:45
閱讀 2428·2019-08-26 12:15