CSS Transition

CSS Transition屬性的4個操作

使用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個面向來調整動畫:

  1. 時間長度(duration)
    調整個動畫的撥放時間長度。
  2. 轉變速度(timing-function)
    動畫執行的速度,由快而慢,或是由慢而快等等的速度變化。
  3. 延遲的時間(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如何操作後,現在你已經知道:

  1. transition-duration,是用來控制動畫的時間長度。
  2. transition-timing-function,是掌控動畫的速度變化。
  3. 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),客製化動畫移動的速度,https://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的屬性值便介紹完了,包括:

  1. transition-property,指定動畫的項目。
  2. transition-duration,用來控制動畫時間長度。
  3. transition-timing-function,掌控動畫的速度變化。
  4. 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後,還有兩點需要留意:

  1. 並非所有CSS都可以有轉場的效果,參考MDN的可transition的CSS列表,來了解哪些CSS適用。
  2. 由於transition是CSS 3的新產物,瀏覽器不一定有支援,記得使用前綴,讓CSS可在瀏覽器顯示出來 。

看完CSS Transition的操作方式後,試試做一個你自己的transition吧!

延伸閱讀:

CSS組合選擇器:5個選擇器符號功用介紹

CSS權重(specificity):熟悉這6個樣式級別,讓你的樣式被採用

4個步驟認識CSS基礎操作與選擇器

Python爬蟲必備的HTML概念,5個要點認識網頁的基本結構

15個常用的HTML標籤與屬性基本介紹

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *