animation: name duration delay infinite linear;
口訣：animation: 名字 持續時間 延遲 無限 功能
name => @keyframes name{}
1
2
3
4
5
6
7
| animation: mymove 5s 2s infinite linear;
//名字
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
|
animation-duration => 持續時間
1
2
3
4
5
6
7
| //animation-duration 持續時間:預設：0
normal,reverse反向,alternate交替 ,alternate-reverse交替反向
animation-duration: 3s;
animation-duration: normal;
animation-duration: reverse; //反向
animation-duration: alternate; //交替
animation-duration: alternate-reverse ; //交替反向
|
animation-delay 動畫延遲
1
2
3
4
5
6
7
8
9
10
| 預設：0s
animation-delay:2s;
# animation-iteration-count //動畫迭代計數
預設：1
animation-iteration-cout:3 // number
animation-iteration-cout:infinite //無限
animation-iteration-coutinitial ,//初始
animation-iteration-cout ：inherit //繼承
|
animation-timing-function 動畫定時功能
1
2
3
4
5
6
7
8
9
10
11
12
| 預設：ease
linear: 開始與結束相同動畫
ease:輕鬆,默認值 動畫有一個緩慢的開始，然後是快速的，然後是緩慢的結束
ease-in： 動畫啟動緩慢
ease-out：動畫結束緩慢
ease-in-out：動畫既有緩慢的開始，也有緩慢的結束
step-start：相當於步驟（1，開始）
step-end：Equivalent to steps(1, end) 相當於步驟（1，結束）
steps(int,start|end)：
指定一個步進函數，有兩個參數。 第一個參數指定函數中的間隔數。 它必須是一個正整數（大於 0）。 第二個參數是可選的，是值“start”或“end”，並指定在區間內發生值變化的點。 如果省略第二個參數，則賦予其值“end”
cubic-bezier(n,n,n,n)：
在貝塞爾函數中定義您自己的值 可能的值是從 0 到 1 的數值
|
animation-play-state 動畫播放狀態
1
2
3
4
5
6
7
8
9
10
11
12
| paused 暫停 /running 跑步
注意：一定要指定animation-duration屬性，否則duration為0，永遠不會播放。
# animation-fill-mode 動畫填充模式
預設：nane
none： 默認值。 動畫在執行之前或之後不會對元素應用任何樣式
forwards：轉發 元素將保留最後一個關鍵幀設置的樣式值（取決於動畫方向和動畫迭代計數）
backwards：向後獲取由第一個關鍵幀設置的樣式值（取決於動畫方向，並在動畫延遲期間保留此值
both：兩個都 動畫將遵循向前和向後的規則，在兩個方向上擴展動畫屬性
initial：最初的 將此屬性設置為其默認值。 閱讀關於初始
inherit：繼承 從其父元素繼承此屬性。 閱讀關於繼承
|