# 認識CSS#11 Transition
###### tags: `CSS`

## transition

為了改變兩個外觀間轉換的屬性，轉換過程看起來會很生硬，只要加上 transition 就可以讓轉換的過程中補上動畫，像是寫 hover 時會需要外觀上的轉換給予回饋，不管是顏色、形狀、大小等等，加上了 transition 形成補間動畫，看起來會更生動。

### transition 屬性

| 屬性名稱 | 效果 |
| -------- | -------- |
| transition-property | 指定要轉換的CSS屬性 ex: background 等等 |
| transition-duration | 轉換需要的時間，預設0，單位為 s 或 ms |
| transition-delay | 延遲多久轉換，預設0，單位為 s 或 ms |
| transition-timing-function | 轉換時的速度曲線，預設ease |

#### transition-timing-function 屬性

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

### 我們可以將這些 transition 屬性寫在同一行

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

### [hover 顏色轉換 + transition](https://codepen.io/binlandz123/pen/bGLydLY?editors=1100)

### 單一屬性，多個屬性做 transition

我們可以在 transition 一次為單個或多個屬性新增動畫

#### 單個屬性寫法 ( 改變背景顏色動畫 )

background-color: yellow;
transition: background-color 0.3s ease-in;

#### 多個屬性寫法( 改變寬度及背景顏色動畫 )

width:400px;
background-color:blue;
transition: background-color 0.3s ease-in , width 2s ease ;

### 雙向動畫

如果我們在 hover 來觸發 transition ，在滑鼠移開該元素，會出現很生硬的切換回原本屬性，如果我們想要在滑鼠移開的時候切回原本屬性也有動畫的話，那我們也在原本屬性上加上 transition 並把想要變回去的屬性值寫進去就好了

#### [雙向連結](https://codepen.io/binlandz123/pen/gOvJarv?editors=1100)

### [transition 支援屬性](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties)

## transition 沒有效果的情況

### 1. transition 必須要是確切數值來做轉換

transition轉換的開始和結束屬性值都必須是確切數值，否則將無法進行計算

1. width:auto(不確定的值)轉換成 width:100px(確切值)
2. display:none 轉換成 display:block，none 和 block 都不是數值

### 2. transition 需要事件觸發

transition 沒辦法一進頁面自動產生效果，需要透過 JS 或是 hover 、 focus 等偽元素來呈現效果

## 參考

[CSS動畫-Transition](https://ithelp.ithome.com.tw/articles/10200365)
[CSS3 動畫 Transition, Animation, Transform 基礎](https://hoohoo.top/blog/css3-animation-notes/)
[Animatable CSS properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties)