CSS - Transition ( 轉場效果 )

今天要來介紹 CSS 中的轉場效果 Transition！
說到轉場，想必大家在大學做報告時，對 PPT 的轉場功能都不陌生對吧！

妳說妳不會 PPT ？ 那妳們組的簡報….
蛤？ 妹紙？
等等記得私我 ( #

簡單來說轉場就是 …
來人啊上圖！

接著我們來看看語法吧！

transition-property // 轉場屬性，可以是 all | none | 自定義 ，默認為 all
transition-duration // 轉場所耗費時間 (小於一秒可省略0, ex: .5s)
transition-timing-function // 轉場時間函式 (快 -> 慢 | 慢 -> 快)
transition-delay // 轉場前等待時間
// -----
// 以上設定可簡化成 : 
// transition: property duration timing-function delay

在使用 transition 時，「 通常會使用偽類去觸發 」( 跟 animation 的不同
另外與 transform 搭配食用，可以做出各種效果哦！

那…我們先看看實例，我想會比較好懂

// 在範例中，div 方塊在觸碰後寬度會變為 500px
// 為了開啟轉場效果，必須在 原本屬性 加上設定
transition-property: width;
transition-duration: 1s;
// 這樣就完成轉場效果了哦！

-

接下來看看時間函式吧！
transition-timing-function，主要有以下幾種常見設定

linear // 平均速度
ease // 快入緩出 (預設)
ease-in // 緩入
ease-out // 緩出
ease-in-out // 緩入緩出
cubic-bezier // 自定義貝茲曲線
// 想深入研究可以參考: CSS3 Cubic Bezier  cubic-bezier

好啦！看完這些大概有初步概念了吧
至於進階應用的話….
像是一些照片輪播等等，其實搭配簡單的 JavaScript 就很容易做出來

還不趕快掌握這麼方便的 CSS 語法！

我要去睡啦（睏