# 認識CSS#12 animation
###### tags: `CSS`

## animation

animation 是用來撰寫複雜的 CSS 動畫效果

## animation 屬性

| 屬性名稱 | 說明 |
| -------- | -------- |
| animation-name | @keyframe 動畫名稱 |
| animation-duration | 動畫執行1次所需的時間(s or ms) |
| animation-timing-function | 動畫效果轉換的速率 |
| animation-delay | 延遲動畫開始的時間 |
| animation-iteration-count | 動畫重複次數， infinite 設定為無限 |
| animation-direction | 動畫播放正向或是反向播放，也可以設定為單數次正向播放、雙數次為反向的運行狀態。|
| animation-fill-mode | 動畫開始前後是否保持動畫設定 |
| animation-play-state | 決定當前的動畫是否暫停 |

#### animation-timing-function 屬性

| 屬性名稱 | 效果 |
| -------- | -------- |
| ease | 緩入中間快緩出，預設值 |
| linear | 均速 |
| ease-in | 緩入 |
| ease-out | 緩出 |
| ease-in-out | 緩入緩出 |

#### animation-direction 屬性

| 屬性名稱 | 效果 |
| -------- | -------- |
| normal | 正常播放 |
| reverse | 反向播放 |
| alternate | 單數次為正向播放，雙數次為反向播放 |
| alternate-reverse | 雙數次為正向播放，單數次為反向播放 |

#### animation-fill-mode 屬性

| 屬性名稱 | 效果 |
| -------- | -------- |
| forwards | 停留在結束的狀態 |
| backwards | 停留在剛開始的狀態 |
| both | 依據開始或結束決定呈現的狀態 |
| none | 回到最初未播放狀態 |

#### animation-play-state

| 屬性名稱 | 效果 |
| -------- | -------- |
| running | 預設播放 |
| paused | 暫停播放 |

## 建立動畫

### step1 @keyframes

keyframes 就是一段動畫，自己撰寫動畫要怎麼執行

#### 語法:

@keyframes animationName {
  keyframes-selector {
    /* css-styles */
  }
}

* animationName : 可以自己定義這段動畫的名稱

* keyframe-selector : 物件在動畫的某個時間點的狀態，有用 % 、 from ... to 來做

| keyframe-selector 屬性 | 說明 |
| -------- | -------- |
| from{}to{} | 只有頭尾的撰寫方式 |
| % | 可以根據 0~100 % 來做動畫 |

* 剩下就是在 selector 中撰寫 想要的動畫效果囉!

### step2 套用 animation 並載入 keyframes

在撰寫好動畫後，我們需要套用他

.element{
    animation-name: 要套用的 keyframes animationName;
}

### step3 完成

## [簡單範例](https://codepen.io/binlandz123/pen/QWQRrZK?editors=1100)

## 參考

[一個工具，帶你完整認識 CSS Animation](https://www.casper.tw/development/2021/10/04/css-animation/)
[Summer。桑莫。夏天](https://cythilya.github.io/2017/08/27/css-animation/#animation-%E5%8B%95%E7%95%AB)
[CSS3 動畫 Transition, Animation, Transform 基礎 [筆記]](https://hoohoo.top/blog/css3-animation-notes/)