# 認識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 屬性寫在同一行 ```=css transition: transition-property | transition-duration | transition-timing-function | transition-delay; ``` ### [hover 顏色轉換 + transition](https://codepen.io/binlandz123/pen/bGLydLY?editors=1100) ### 單一屬性，多個屬性做 transition 我們可以在 transition 一次為單個或多個屬性新增動畫 #### 單個屬性寫法 ( 改變背景顏色動畫 ) ```=css background-color: yellow; transition: background-color 0.3s ease-in; ``` #### 多個屬性寫法( 改變寬度及背景顏色動畫 ) ```=css 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)