更新日期: 2022 年 11 月 1 日
使用CSS製作網頁動畫，Transition、Transform、Animation這3個有關CSS動畫的屬性肯定是很常碰到，然後也很容易在不同的屬性名稱、屬性值之間搞混，尤其Transition、Transform，甚至還有Translate，一堆T開頭的英文名稱，好像就讓腦容量滿載了，還沒製作動畫前，腦袋就動不起來了。
為了能夠讓腦袋動起來，學習CSS動畫的操作前，先來看看動畫是如何產生的，對於理解你理解CSS各種屬性的使用，會更有概念。
動畫，其實就是一堆靜止圖像，連續變化而產生的。
也許，你可能就有過自製動畫的經驗，在書本上畫上各種圖案，快速翻動，就變成了一個小動畫，例如下方的影片，就是手繪影格的實例。
而假如你熱情足夠，還可以為自製的影格配上音樂，情境就更好了，看下方的手繪動畫，是不是滿有那麼一回事的。
從手繪製作的動畫書，可以發現到，不同圖片間的快速變化，讓眼睛因為視覺的殘影產生的錯覺，就是你看到的動畫。
而CSS動畫也是用同樣的方式，來呈現出網頁上的動畫，要產生動畫，就必須要有圖像的轉變，而CSS屬性Transition、Transform、Animation便是在控制各種圖形、顏色等等的轉變，學習CSS動畫，就是學習如何巧妙地運用這3個屬性，來呈現出你期望的網頁動畫。
本文將先帶你釐清 Transition 這個屬性的4個操作，一步一步的解鎖CSS動畫的技能。
CSS Transition 轉場效果
前面提到，動畫就是影像的變化所產生的，所以你至少需要一張變化前的圖像，跟一張變化後的圖像。
假如你現在想做一個方塊變形的動畫，滑鼠一靠近就會由正方形，變身為長方形，利用:hover，搭配背景顏色的轉變，來做出變化後的圖像，寬度變為300px的長方形。
See the Pen Transition1 by Ory (@SLSuccess) on CodePen.
但如果你希望讓這個動畫，可以像是一個進度條一樣，慢慢的轉變為長方形，而不是前面看到的瞬間轉變，你可以使用transition屬性來操控，transition幫你在網頁上製造兩個狀態之間切換的轉場效果。
Transition從3個面向來調整動畫
transition這個屬性可以從3個面向來調整動畫:
- 時間長度(duration)
調整個動畫的撥放時間長度。 - 轉變速度(timing-function)
動畫執行的速度，由快而慢，或是由慢而快等等的速度變化。 - 延遲的時間(delay)
觸發動畫後，等候多久再展現動畫。
延續前面的例子，下方的CSS便是調整方形變化為長方形的時間，來形塑出一個進度條的動畫，設定了時間長度為2秒，轉變速度沒有填寫變為預設的ease模式( 加速再減速 )，當滑鼠游標移到方塊上時，方塊便會在2秒內，以ease模式的速度，轉變為長度500px的長方形。
See the Pen Transition2-bar by Ory (@SLSuccess) on CodePen.
而若現在希望所製作的進度條動畫，在觸發後(:hover是滑鼠移到圖像上就觸發動畫)，等個1秒後再開始動，並且以linear(等速度)的模式展現，便可以再加上下方CSS。記得，等1秒喔!
transition-timing-function:linear;
transition-delay:1s;See the Pen transition3 by Ory (@SLSuccess) on CodePen.
利用前面幾個簡單例子說明transition如何操作後，現在你已經知道:
- transition-duration，是用來控制動畫的時間長度。
- transition-timing-function，是掌控動畫的速度變化。
- transition-delay，則是調整動畫觸發的延遲時間。
Transition屬性值的使用
要怎麼善用transition這個CSS屬性呢?學會填入屬性值，便會懂得如何使用transition來做出動畫。
Transition-duration、transition-delay 的時間感
transition-duration跟transition-delay這兩個屬性要填入的值很單純，就是填入時間長度即可。
有2種時間單位供你使用，分別是秒(s)及毫秒(ms):
- 以秒為單位:1秒以1s來表示，0.6秒就寫成0.6s。
- 以毫秒為單位:1毫秒以1ms來表示，1000毫秒等於1秒(1000ms=1s)。
通常以秒為單位即可，時間太短，眼睛也分辨不太出來，不過如過你要呈現連續式的感覺，毫秒就很好用。
Transition-duration 的時間只須為正值，負值無效； transition-delay的時間則可正、可負，正值就是等多久，負值的話，會像是扣掉設定的秒數，直接啟動轉場效果。
下方的例子，就是比較transition-delay的時間是負值， 與沒有延遲的狀況。
橘色的方塊寬度，由100px轉場為500px，耗時10秒(滑鼠必須一直在方塊上，動畫才會持續，移走滑鼠就會恢復原狀)，在 transition-delay 為-5s的情況下，當滑鼠移到橘色圖像上，轉場馬上就跳到5秒的位置，以回應 transition-delay 為-5s 的設定，並且花5秒就完成 500px寬度的長方形 。
藍色的方塊，沒有 transition-delay，其他轉場條件與橘色方塊相同，觸發藍色方塊動畫，可以看到500px寬度的藍色長方形耗費10秒才形成，而兩個方塊的起始點有滿大的不同，這是就transition-delay 為負值時的效果。
See the Pen transition6-time by Ory (@SLSuccess) on CodePen.
Transition-timing-function 掌握變化速度
transition-timing-function的值就稍微複雜一些，你需要多了解幾個單字表達的含意，例如前面的例子使用的linear就是等速的意思。主要包括以下幾種:
- ease (預設值，加速再減速，不對稱的)
- linear (等速)
- ease-in(慢慢加速)
- ease-out(慢慢減速)
- ease-in-out(加速，再減速，對稱的)
- cubic-bezier(貝茲曲線)
貝茲曲線可以讓你填入參數cubic-bezier(n,n,n,n)，客製化動畫移動的速度，cubic-bezier.com這個網站可以讓你客製化調整，取得你所需要的貝茲曲線。
transition-timing-function的值還有step-start、step-end、steps(步數,目的地)，讓你展現逐格動畫。
Transition-property 指定轉場目標
除了目前提到的transition-duration、transition-timing-function、transition-delay之外，還有一個transition屬性還沒提到，那就是transition-property，用來讓你更精準的掌控只有那些CSS要展現出轉場的動畫效果。
transition-property 的屬性值可以是要轉場的CSS屬性名稱，例如width、height，所有CSS都要轉場就填上all(預設值)，都不要就填上none。
延續前面的方塊例子，hover(滑鼠滑過)後的方塊，長寬都由100px變為300px，但只有寬度需要transition的動畫，使用transition-property:width，指定只有寬度的CSS需要transition，當游標指到方形上時，方形的高度直接變為300px，寬度則慢慢地transition轉場過去。
See the Pen Transition4-property by SLS (@SLSuccess) on CodePen.
Transition 屬性的4個操作
介紹到這邊，transition的屬性值便介紹完了，包括:
- transition-property，指定動畫的項目。
- transition-duration，用來控制動畫時間長度。
- transition-timing-function，掌控動畫的速度變化。
- transition-delay，調整動畫觸發的延遲時間。
當你想省略只以transition來表示時，各值的語法是這樣:
transition: property duration timing-function delay;動畫時間在前，延遲時間再後，下方的例子便是將transiton簡寫再一起，延遲1秒後，啟動長達5秒的動畫。
See the Pen transition4 by Ory (@SLSuccess) on CodePen.
除了圖形尺寸大小的改變，透明度、顏色、圓角等CSS也都可以應用其中，讓動畫有更多樣貌。下方是一個改變透明度、顏色、圓角的按鈕，hover後都做出轉變!
See the Pen transition5-button by SLS (@SLSuccess) on CodePen.
更多Transition微調方法
轉場的啟動與恢復
前面的各個例子中，transition屬性都寫在轉場前的狀態中，形成啟動動畫、恢復原狀的動畫展現方式都一樣，雙向的轉場都相同。
如果你希望啟動與恢復的方式不同，可以在轉場前、後的CSS中寫入你要的transition，下方的例子就是:hover的轉場3秒，但恢復原狀只要1秒的情況，可以很明顯地看到，滑鼠移到方框上，要耗時3秒才可以轉變為長方形，滑鼠移開，1秒鐘就恢復為方形了。
See the Pen transition7-不同位置 by SLS (@SLSuccess) on CodePen.
不同CSS設定不同轉場
希望寬度轉場的時間與高度不同，使用逗號可以幫你做到這個功能。
每個逗號可以區隔開，不同CSS的轉場要求，下方例子便是寬度與高度時間差不同的效果，觸發轉場動畫後，高度跑得比較快，寬度則比較慢。回覆時，則將時間差倒置，變成寬度恢復原狀快，高度較慢。
See the Pen transitioiin9-comma by SLS (@SLSuccess) on CodePen.
Transition注意事項
懂得使用transition後，還有兩點需要留意:
- 並非所有CSS都可以有轉場的效果，參考MDN的可transition的CSS列表，來了解哪些CSS適用。
- 由於transition是CSS 3的新產物，瀏覽器不一定有支援，記得使用前綴，讓CSS可在瀏覽器顯示出來 。
看完CSS Transition的操作方式後，試試做一個你自己的transition吧!
延伸閱讀:
CSS權重(specificity)：熟悉這6個樣式級別，讓你的樣式被採用
