前言

在 CSS3 內有兩種新的屬性讓我們可以實現特別的動畫效果，分別是 Transition 以及 Animation ，本章節將詳細的介紹 Transition 效果。

簡介

使用 CSS3 新增的 Transition 屬性讓你定義的元素在兩種狀態間轉換，而不需要透過JS來操作元素轉換。
此屬性可以隨著時間的推移從舊狀態平滑的過度到新狀態，舉例來說：我們可以使用 Tansition 使元素 由小變大、由藍變紅。

Transition 基礎語法

transition: property name | duration | timing function | delay

transition-propert 屬姓名稱

定義哪些 CSS 屬性名稱要綁定 Transition 動畫。
transition-propert 有三種內建屬性：

• none : 無設定屬性，該值為預設值。
• all : 綁定所有 CSS 屬性。
• custom-ident : 依據 CSS 的 class 名稱指定屬性。

而要是 transition-propert 的值長度與其他 transition 屬性質長度不符合時，多餘的值將會被自動忽略。

div {
  transition-property: opacity, left, top, width;
  transition-duration: 2s, 4s;
}

由上面範例得知，property 屬性的值長度超過 duration 屬型的值長度時 duration 屬性會重複匹配 property屬性。
因此 top 的過場時間為 2s，width 的過場時間為 4s。

要注意的一點是，transition 所綁定的 CSS 屬性必須是 可被計算之屬性。
舉例來說
可被計算屬性：

• width: 100px;
• backgraound-color: #fff;
• text-indent: 30px;
• margin-left: -50%;

不可被計算屬性：

• display: block;
• test-aling: center;
• vertical-align: middle;

transition-duration 轉場時間

此屬性設定了 CSS 從舊屬性過度到新屬性所花費的時間。

• 過度時間 預設值為0，表示該過度時間是立刻被執行。
• 而將過度時間設為負值時，則數值無效。

transition-timing-function 時間函數

描述在轉場動畫在執行時，透過程式計算出來的時間的變化模式。也就是每一個影格所變化值。
常用的 timimg-function 有幾種：

• ease : 漸入漸出 - 起始值較慢，中間速率加快，結尾趨慢。此屬性為預設值。
• ease-in : 漸入 - 起始值較慢，中間速率加快，結尾持平。
• ease-out : 漸出 - 起始值較快，中間驅緩，結尾持平。
• ease-in-out : 緩入緩出 - 起始與結束速度都是較慢，中間無明顯加速度狀態。
• linear : 無變化 - 從起始到結束，時間變化皆一致。
• steps : 逐格動畫 - 每個動作之間沒有補間，所以會精準的運算好每個時間點的每個位置。當然，步數設的越多，動畫看起來就會越滑順。

其他關於 timing-function 的知識，會在後面章節詳細說明。

transition-delay

設定在轉場動畫啟動之後要等待多久的時間才會開始執行轉場動畫。
transition-delay可以設定數值 0、正數或負數：

• 數值為 0 : 即啟動後立刻開始執行轉場。
• 數值為正數 : 指定啟動後經過多久的時間才開始執行轉場。
• 數值為負數 : 視覺上看起來像是未啟動就開始執行轉場。
  

前方陷阱埋伏！請問單兵如何處置？

在我們使用 transition 製作酷炫的轉場動畫好讓網頁與使用者有更好的互動體驗時，往往會發現幾個雷點。接下來我們來一一破解吧～

踩雷1

我們將滑鼠移到元素身上，打算開始執行轉場動畫時，元素卻像鬼打牆一般閃爍了一下。

到底是發生了什麼事呢？原來是因為當我們將滑鼠移到元素身上，觸發了轉場動畫，但當元素離開了原本位置時，滑鼠又偵測不到元素了。此時的元素就會脫離觸發狀態，打算回到起始位置。

該如何破解這種狀況呢？我們可以新增一個固定的觸發區域來觸發需要轉場動畫的元素。

<div class="control"></div>
<div class="box"></div>

.control {
    width: 20px;
    height: 20px;
    background-color: #986DB2;
    border-radius: 50%;
}
.box {
	width: 100px;
	height: 100px;
	background-color: #7B90D2;
	transition: all 0.5s;
}
.control:hover~.box {
	margin-left: 15%;
	margin-top: 10%;
}

踩雷2

我想使用 display: none 讓元素消失，怎麼又出現閃爍啦！我的眼睛好痛啊！

前面在介紹 transition-propert 時就有提到 transition 所綁定的 CSS 屬性必須是 可被計算之屬性。所以當我們鐵齒的使用不可被計算之屬性時，很有可能就會造成問題。

因此，我們來看看使用 opacity 屬性將元素漂亮的隱藏起來的效果。

<div class="box"></div>

.box {
	width: 100px;
	height: 100px;
	background-color: #D0104C;
	margin-left: 10%;
	margin-top: 10%;
	transition: all 2s;
}
.box:hover {
	opacity: 0;
}

以上，有關於 Transition 的介紹就到這邊囉，如果有使用 Transition 做出超瞎趴的轉場動畫，歡迎隨時留言告訴我呦～

我們下一篇見！

參考資料

• W3.org - Transitions
• MDN - transitions
• 前端新手村 - Transition
• 講講 CSS3 動畫Transitions