css筆記 - animation學習筆記(二)
阿新 • • 發佈：2018-08-28
暫停 100% mat dir 有關 col 支持 特殊 forwards
animation動畫
@keyframes規則 - 創建動畫
from - to 等價於 0% - 100%
但是優先使用0% - 100%，因為瀏覽器兼容性還好點
animation 動畫綁定
將keyframes動畫規則綁定到選擇器。
必須設定動畫的名稱和時長。
所有動畫屬性
animation-name
keyframes動畫的名稱
| 屬性 | 含義 | 備註 |
|---|---|---|
| 動畫名稱 | 就是keyframes規定的動畫名稱 | 不設置動畫不成功 |
| none | 設置後無動畫效果 | 如果真的沒有動畫就不需要設置，但是這個功能的特殊用途用於覆蓋級聯的動畫。 |
animation-duration
規定動畫完成一個周期所花費的秒(.2s)、毫秒(200ms)
animation-timing-function
速度曲線(三次貝塞爾曲線)
| 屬性 | 含義 | 備註 |
|---|---|---|
| linear | 勻速運動 | |
| ease | 慢 - 快 - 慢 | |
| ease-in | 慢 - 快 | |
| ease-out | 快 - 慢 | |
| ease-in-out | 慢 - ~ - 慢 | |
| cubic-bezier | 自定義 | 上邊這幾個屬性，都會在關鍵幀之間插入補間動畫。使得動畫效果連貫。 |
| steps()函數 | 逐幀動畫 | 適用於關鍵幀的跳躍 |
針對上邊五個三次貝塞爾，其對比效果看下邊w3c的效果一目了然
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 50px; background: red; color: white; font-weight: bold; position: relative; animation: mymove 5s infinite; -webkit-animation: mymove 5s infinite; /* Safari and Chrome */ } #div1 { animation-timing-function: cubic-bezier(0, 0, 0.25, 1); } #div2 { animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); } #div3 { animation-timing-function: cubic-bezier(0.42, 0, 1, 1); } #div4 { animation-timing-function: cubic-bezier(0, 0, 0.58, 1); } #div5 { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); } /* Safari and Chrome: */ #div1 { -webkit-animation-timing-function: cubic-bezier(0, 0, 1, 1); } #div2 { -webkit-animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); } #div3 { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1); } #div4 { -webkit-animation-timing-function: cubic-bezier(0, 0, 0.58, 1); } #div5 { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); } @keyframes mymove { from { left: 0px; } to { left: 300px; } } @-webkit-keyframes mymove /* Safari and Chrome */ { from { left: 0px; } to { left: 300px; } } </style> </head> <body> <p> <strong>註釋：</strong>Internet Explorer 9 以及更早的版本不支持 animation-timing-function 屬性。</p> <div id="div1">linear</div> <div id="div2">ease</div> <div id="div3">ease-in</div> <div id="div4">ease-out</div> <div id="div5">ease-in-out</div> </body> </html>
特殊的 steps()函數
參數 | 含義 | 備註
---- | ---- | ----
正整數 | 指定時間函數中的間隔數量 | 必須是正整數
start/end | 設置最後一步的狀態 | start為結束時的狀態（第一幀是第一步動畫結束），end為開始時的狀態(第一幀是第一步動畫開始)
定義steps的keyframes規則中，所有關鍵幀必須寫出來，
比如我下邊這個demo中
@keyframes bgChange { 0% { background-position-x: 0px; } 20% { background-position-x: -90px; } 40% { background-position-x: -181px; } 60% { background-position-x: -271px; } 80% { background-position-x: -359px; } 100% { background-position-x: -449px; } }
如果只改成from{} to{}兩幀，動畫跑不起來。同樣的0% - 100% 也不可以。
animation-delay 延遲動畫
動畫延遲開始時間
animation-iteration-count: infinite；循環動畫
動畫播放次數
- 常用 infinite
animation-direction 反向動畫
是否逆向播放
屬性 | 含義
---- | ----
normal | 正常播放
alternate | 反向
alter： vt. 改變，更改
animation-play-state 暫停動畫
是否運行or暫停動畫
| 屬性 | 含義 |
|---|---|
| paused | 暫停 |
| running | 跑起來，運行 |
巧妙的運用該屬性，鼠標經過的時候設置為運行，鼠標離開即變回默認的暫停狀態。
animation-fill-mode
動畫時間之外的狀態
| 屬性 | 含義 | 備註 |
|---|---|---|
| none | 不改變默認行為 | |
| forwards | 動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義） | 感覺就像定格最後一針的效果不變 |
| backwards | 延遲執行時間段內，動畫開始前，應用開始屬性值（在第一幀中定義） | 同上，只不過將變化的第一幀先定格展示出來 |
| both | 向前和向後填充模式都被應用。 | 上邊兩個結合應用，開始前將第一幀先展示，結束後最後一幀定格不變。 |
css筆記 - animation學習筆記(二)