# css 整理 - Transition v.s. Animation - css 動畫大全
###### tags: `css`
## Transition/ Animation / Transform 這些差在哪啦?!

### 形變+時間 ⇒ 動態（AE 才能做）
| [Transition](https://hackmd.io/ejtO-e24QpudjO78WwLuCA?view#Transition)(漸變) | [Animation](https://hackmd.io/ejtO-e24QpudjO78WwLuCA?view#animation) (動畫) |
| -------- | -------- |
A ⇒ B | 0%:A ⇒ 20%:B ⇒ 50%:C ⇒ 100%:D
**簡單轉場動畫**|**細節複雜可定義影格的動畫**
| 只能定義開始狀態和結束狀態，不能定義中間狀態 | 可以自行控制各階段動畫的變化
需要事件觸發 (ex:**滑鼠事件**（:hover、:active、:focus、click）或**鍵盤輸入**時觸發 )，無法在網頁加載時自動發生|網頁加載時會直接執行
是一次性的，不能重複發生，除非一再觸發。|可用參數 animation-iteration-count 定義重複次數

### only 形變 ⇒ 靜態 (illustrator 就做得出來的)

[**Transform**](https://hackmd.io/ZBOxzNvVRuiKnkNXN9Lx6A?view)

## Transition

| 名稱 | 解釋 | default values / other values
| -------- | -------- | -------- |
| transition-property | 要轉換的CSS屬性 | [CSS Animatable Properties](https://www.quackit.com/css/css3/animations/animatable_properties/) |
| transition-duration | 轉換過程的時間 | **0** / 2s / 20ms|
| transition-property | 延遲多久才轉換 | **0** / 2s / 20ms |
| transition-property | 加速度函式 | **ease** / linear / ease-in / ease-out / ease-in-outstep-start / step-end / steps(int,start/end) / cubic-bezier(n,n,n,n) |

#### Transition縮寫

transition: transition-property | transition-duration | transition-timing-function | transition-delay;

ex:

.button {
  color: white;
  text-align: center;
  background-color: #356EAF;
  width: 100px;
  height: 100px;
  transition: width 1s,height 1s; 
  /*  transition 寫在本體上，會做出本體與:hover 事件觸發時的轉場（在這邊定義的1s之間）*/
}

.button:hover {
  background-color: #356EAF;
  width: 150px;
  height: 150px;
}

## **animation**

搭配 @keyframe 使用

| 名稱 | 解釋 | default values / other values | 常用情形 |
| --- | --- | --- | --- |
| animation-name | 自訂 @keyframe 的名稱 | | |
| animation-duration | 持續時間 | **0** / 2s / 20ms … | |
| animation-delay | 延遲播放時間 | **0** / 2s / 20ms / -1s… | |
| animation-iteration-count | 播放次數 | **1** / infinite | |
| animation-timing-function | 加速度函式 | **ease** / linear / ease-in / ease-out / ease-in-outstep-start / step-end / steps(int,start/end) / cubic-bezier(n,n,n,n) | |
| animation-direction | 播放方向 | **normal** / reverse / alternate / alternate-reverse | |
| animation-fill-mode | 播放前後模式 | **none** / forwards / backwards / both | forwards：動畫結束後，保持在最後一個影格狀態（跑到對面之後就停在那了） |
| animation-play-state | 播放或暫停狀態 | **running** / paused | 滑鼠移到區塊上畫面才開始跑 |

#### animation 縮寫

animation: name duration | timing-function | delay | iteration-count | direction | fill-mode | play-state;

**animation-delay 是負數的時候**

⇒ *不會延遲，而是快轉*
假設一段動畫要 5 秒，animation-delay 設定為 -2s，那麼動畫將會直接從第二秒的位置開始播放，播放三秒後停止 ( 類似 5-2=3 的概念 )

ex:
下面兩者作用相等

div{
    position:absolute;
    left:0;
    width:50px;
    height:50px;
    background:#f00;

    animation-name:oxxo;
    animation-duration:2s;
    animation-timing-function:ease-in;
    animation-delay:1s;
}

@keyframes oxxo{
    from{
        left:0;
    }
    to{
        left:100px;
    }
}

div{
    position:absolute;
    left:0;
    width:50px;
    height:50px;
    background:#f00;

    animation:oxxo 2s ease-in 1s;
}




@keyframes oxxo{
  0%{
        left:0;
    }
  100%{
        left:100px;
    }
}

## 好站！
純 css 效果庫 => [animista](https://animista.net/play/basic)

常用 animatable css property 動態展示 => [animatable showcases](http://projects.verou.me/animatable/)

[完整解析 CSS 動畫 ( CSS Animation )](https://www.oxxostudio.tw/articles/201803/css-animation.html)