@keyframes & animation

Key Frames = 關鍵影格，使用多個關鍵影格來達到動畫的效果。

可以重複執行的設定，是和transition&transform最不一樣的地方。

@keyframes 使用

@keyframes animation-name{
0%{屬性...}
50%{屬性...}
100%{屬性...}
}

百分比代表動畫的時間，開始是0%，結束是100%。

animation 使用

animation-name

剛剛有提到的animation-name，就是動畫的名稱

animation-duration

動畫所需的時間

animation-time-function

動畫漸變的時間方法

1. ease (default)慢-快-慢
2. ease-in 慢-快
3. ease-out 快-慢
4. ease-in-out 慢-漸快-漸慢
5. linear 相同速度
6. cubic-bezier(x1,y1,x2,y2)

animation-iteration-count

執行次數，可以是一個數值，或是infinite(無限次)。
可以重複執行的設定，也是和transition&transform最不一樣的地方。

animation-direction

重複執行時，可以改變方向。
例如:第一次執行時往上，第二次執行時往反方向。

1. normal(default)相同方向
2. reverse 相反方向
3. alternate 奇數為正方向；偶數違反方向。
4. alternate-reverse 奇數為反方向；偶數違正方向。

animation-play-state

可以設定動畫執行或暫停

1. running (default)
2. paused

使用時機: 可以設計，當滑鼠(hover)進入時，動畫暫停；滑鼠移開後，動畫繼續。

div:hover{animation-play-state:paused;}

animation-delay

延遲幾秒後開始

animation-fill-mode

當動畫有延遲開始並且有結束時，我們可以設定它延遲時與結束時的樣式

1. none(default)
2. forwards 動畫完成後，保持最後動畫關鍵影格樣式。
3. backwards 動畫在延遲開始時，保持最初動畫關鍵影格樣式。
4. both 同時遵照forwards和backwards。

animation 簡易表示法

1. 全部放一起，順序可以不同，中間以空格區隔就可以。
2. 若沒有設定就使用預設值。
3. 同時設定duration和delay，會先判給duration再判給delay，若只有一個數值，會判給duration。

觀看CodePen練習點這裡