CSS-transition 轉場效果

轉場是從 A 狀態，轉變成 B 狀態，中間的過程，就叫轉場，在 CSS 中叫做 transition。

語法

transition: property  duration  timing-function  delay;
transition: 套用的屬性 花費時間   時間速率         等待時間;

transition: all 2s ease-out 1s;

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

transition-timing-function 時間速率

See the Pen transition 各種速率 by Kanboo (@Kanboo) on CodePen.

範例

範例 1：hover

See the Pen Transition - hover by Kanboo (@Kanboo) on CodePen.

範例 2：設定Two CSS properties

See the Pen Transition - 設定Two CSS properties by Kanboo (@Kanboo) on CodePen.

特別的點：

//設定二個 CSS屬性，設定不同 時間、速率..等
transition: background .2s linear, border-radius 1s ease-in 1s;

上面案例，特別於在 :hover 時，有改變 背景色 和 圓角 效果，
不過在 transition 的設定，分別針對 二個屬性設定不同的時間、速率…等

---

參考資料

[CSS][Transition] 轉場效果

CSS3轉場效果(transitions)

CSS transition 各種速率