### 動畫三要素
1. 過渡( transition )
知道動畫的起始狀態與終止狀態，簡單過渡時使用CSS過渡
2. 變形( transform )
想要在視覺上改變某個元素但又不想影響頁面布局時使用CSS變形
3. 動畫( animation )
在一個元素上執行一系列關鍵幀動畫時，使用CSS動畫
### 1. 過渡：transition
1. transition-property：過渡屬性：all、none、property-name，不是所有屬性都可以過渡的
2. transition-duration：過渡持續時間：.5s 500ms
3. transition-timing-function：過渡函數：ease ease-in ease-out ease-in-out
cubic-bezier(0.1, 0.7, 1.0, 0.1) step-start step-end step( 4, start || end )
4. transition-delay：過渡延遲時間：.5m 500ms
5. transition：all .5s ease 500ms; 過渡屬性 過渡時間 過渡函數 過渡延時
### 1. 過渡：transition對多個屬性應用不同時間
```
div {
width:200px;
height:200px;
background: orange;
text-align: center;
color: white;
}
div:hover {
width: 300px;
height: 300px;
color: red;
transition-property: width, height, color;
transition-duration: .5s, 2s, 5s;
}
```
### 2. 變形：transform
1. transform：scale(.5 || 1.5，2)：2D大小變換
2. transform：translate( x, y )：px || %比 x，y軸移動，只傳入一個值：x軸移動
translateX() || translateY() || translateZ()
```
在相對定位的父盒子中，子元素實現上下左右垂直居：原理：子元素定位到父盒子一半寬高的位置，再偏移自己寬高的一半
div.inner {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
3. transform：rotate( 3600deg )：360deg為一圈，負數逆向旋轉
4. transform：skew( 30deg，40deg ) || skewX() || skewY()：斜切
5. transform-origin：top right || 50px：改變變換原點
### 3. 動畫：animation
1. animation-fill-mode：forwards：保留動畫結束幀時樣式，backwards：動畫第一幀樣式，默認會變為白色
2. animation-duration：動畫持續時間：.5s 500ms
3. animation-name：動畫名稱，可定義多個動畫名
4. animation-delay：動畫開始延遲時間
5. animation-direcion：動畫方向：reverse || alternate-reverse || alternate
6. animation-iteration-count：動畫運動次數：infinity || time || 3.5
7. animation-play-state：控制動畫狀：running || paused
8. animation-timing-function：動畫運動函數
9. animation：name duration timing-function delay count direction fill-mode play-state
### @keyframes
1. 動畫內的關鍵幀時間順序可以自由定制，CSS會自動按照%比階段去觸發
2. WebKit內核的瀏覽器（iOS，Safari）對 from 和 to 的支持不是十分好，建議使用%比
@keyframes animation-name {
from: { css樣式 }，
5%: { css樣式 }，
50%: { css樣式 }，
to: { css樣式 }
}
