###### tags: `六角筆記王` `CSS`
# CSS的動畫三劍客
>參考卡羅奇奇筆記改寫
## :dart:基本介紹
css的三個動畫屬性，分別為`transition`和`animation`和`transform`
## :dart:Transition
### :seedling:快速了解
* **中文譯「轉化」:**
透過transition可以補足兩個外觀間轉變的動畫，讓轉變過程比較柔順，類似PPT裡面的「轉化」效果
* **使用時機:**
最常用在`hover`效果，提升使用者體驗
* **有支援transition的css屬性:**
大部分css屬性都能用transition，然而也不是所有css屬性都能用transition，[查詢網站](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties)
### :seedling:常見屬性
* **transition-property:**
指定要轉換的CSS屬性，可以針對想轉換的屬性使用就好，不用全部都轉化
* **transition-duration:**
轉換需要的時間，預設0，單位為s或ms
* **transition-delay:**
延遲多久才開始轉換，預設0，單位為s或ms
* **transition-timing-function:**
轉換時的速度曲線，預設ease，下面是速度曲線常用屬性名稱

| 名稱 | 說明 |
| -------- | -------- |
| linear | 均速 |
| ease | 緩入中間快緩出，預設值 |
| ease-in | 緩入 |
| ease-out | 緩出 |
| ease-in-out | 緩入緩出(對比於ease較平緩) |

### :seedling:Transition縮寫
`transition`跟`background`一樣可以把一堆屬性寫在一起，但比較尷尬的是`transition-duration`及`transition-delay`都是用時間單位，規則是：

1.如果出現單寫：`transition: width 1s`的話，1s指的是`transition-duration`
2.寫了兩個時間單位數值：前面出現的是`transition-duration`，後出現是`transition-delay`
3.常見順序(要轉換的屬性>轉換時間>轉換曲線>多久後才開始轉換)
`transition: transition-property | transition-duration | transition-timing-function | transition-delay;`
> 建議如果是多人協作盡量不要用縮寫，因為很容易搞混！

### :seedling:針對多個屬性的Transition調整
使用逗號將不同屬性隔開即可

.button:hover{
transition:width 1s, height 2s;
}

### :seedling:雙向Transition
1. **在原本的css裡加入transition屬性:**
雙向動畫都會相同，在觸發狀態更改要轉換的屬性參數即可。
2. **在hover加上tansition屬性:**
會在滑鼠離開時，直接跳回原始狀態;要呈現右方雙向動畫，只要在原始狀態加上transition屬性，並在滑鼠移入狀態加上要改變的屬性轉換參數就可以囉～
3. **如果雙向動畫要不同:**
可以分別在觸發狀態加上觸發時的transition屬性，在原始狀態加上返回時的的transition屬性，控制不同的效果

.button{
color:white;
text-align:center;
background-color:#356EAF;
width:100px;
height:100px;
transition:width 1s, height 1s;
}
.button:hover{
background-color:#356EAF;
width:150px;
height:150px;
transition:width 3s , height 3s;
}

4. **transition寫的時間就是變成他要多久的時間**
下面的例子：變成藍色(原本的)要1s，變成紅色(hover)要3s
<iframe height="300" style="width: 100%;" scrolling="no" title="雙向動畫時間不同" src="https://codepen.io/exnsrpjc/embed/YzQzwJG?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/exnsrpjc/pen/YzQzwJG">
雙向動畫時間不同</a> by 王聖禮 (<a href="https://codepen.io/exnsrpjc">@exnsrpjc</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## :dart:相關資料：
https://ithelp.ithome.com.tw/articles/10200365
https://wcc723.github.io/css/2013/08/24/css-transtion-speed/