[CSS][Transition] 轉場效果

前言

轉場是從 A 狀態,轉變成 B 狀態,中間的過程,就叫轉場,在 CSS 中叫做 transition。適當的增加轉場效果,可以讓使用者的體驗更好,這是在 CSS3 中才有的新功能,目前大部份的主流瀏覽器也都支援了,這裡可看 transition 支援度

語法

底下這行的意思是,所有屬性(all)只要發生改變,等待 1 秒(1s),然後花 2 秒鐘(2s)的時間,轉場到新的樣式;ease-out 的意思是開始快,然後慢慢減速,是 timing-function 的其中一種。

transition: all 2s 1s ease-out;

// 等同於:
transition-property: all; // default: all
transition-duration: 2s;  // default: 0;2s 表示 2 秒;2ms 表示 2 毫秒。
transition-delay: 1s; // 開始進行轉場效果之前,所要等待的時間。
transition-timing-function: ease-out;

範例

範例 1:hover

A B

看原始碼:html css

範例 2:focus

看原始碼:html css

範例 3:多狀態

看原始碼:html css js

上面寫了三個範例,希望可以幫助大家瞭解 transition 的用途、用法。若有位何問題,可於底下留言。

參考資料

CSS3 Transitions

您可在此處留言

搶先留言!

avatar
  Subscribe  
Notify of