# CSS Transition

在CSS3之前的轉場特效，都是立即完成的，覽者並沒有辦法感受到這兩種外觀中間平滑的轉換，造成了視覺上的不適，轉場特效就提供了更為豐富的動畫效果。

當網頁有使用到 CSS3 Transition 馬上就會讓你的網站帥十倍啦！（但本人並不會因此帥十倍^\_^）

使用方法：

![](https://2789376739-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LS9eWtaul1LPr6v0Aii%2F-LS9f-elEGx5kyAYnk63%2F-LS9f3zlkhyHKi4fq3Dn%2Fcss-transition.jpg?generation=1543146078269234\&alt=media)

| 屬性                 | 說明                       |
| ------------------ | ------------------------ |
| Selectesd Property | 指定 transition 效果所要控制的屬性。 |
| Animation duration | 指定多少時間完成 transition 效果。  |
| Animation Type     | 指定 transition 的速度效果。     |
| Animation delay    | 指定 transition 效果的開始時間。   |

* Selectesd Property：如果Selectesd Property定義為all，就會自動偵測所有可進行動畫的屬性哦！
* Animation duration：通常以s為單位(秒)，可以定義小數點例如0.5s或.5s，預設值是0s。
* Animation Type：時間函式，這是用來設定轉場過程時所使用的貝茲曲線。內建的幾個可直接使用數值如下，直接使用名稱就可以取用。

> 什麼是貝茲曲線？&#x20;
>
> ![](https://2789376739-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LS9eWtaul1LPr6v0Aii%2F-LSOtYLPgIFuk0GULszx%2F-LSOtwQ404Zf3r8f_1v2%2Fimage.png?alt=media\&token=20751966-8336-4da1-98d2-0323e48abee8)
>
> * linear：均速
> * ease：先快後慢
> * ease-in：加速
> * ease-out：減速
> * ease-in-out：較平緩的 `ease`
> * step-start
> * step-end
> * steps()
> * cubic-bezier()
>
> Demo：<https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function>

最簡單的背景顏色transition示範：

[https://codepen.io/fukuball/pen/domeOo](https://codepen.io/fukuball/pen/domeOo/)

## ex. css-transition 練習

CSS transition被大量運用在網頁元素hover時的效果&#x20;

練習一

![](https://2789376739-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LS9eWtaul1LPr6v0Aii%2F-LS9f-elEGx5kyAYnk63%2F-LS9f3zpHodQSr8YpOKt%2Ftransition-demo-2.gif?generation=1543146078181387\&alt=media)

![](https://2789376739-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LS9eWtaul1LPr6v0Aii%2F-LStxwOiIuSLzNWIuEWv%2F-LStxzZP5bGlEri0hHPI%2FDec-05-2018%2000-05-28.gif?alt=media\&token=b7e90229-20b2-4d2f-bdeb-9fadca2b67b2)

練習二：練習購物網站時常出現的效果。

![](https://2789376739-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LS9eWtaul1LPr6v0Aii%2F-LStx0WMK1yzIkAikQ6Z%2F-LStxE4l6jNitrVlbRtS%2FDec-05-2018%2000-02-13.gif?alt=media\&token=68d60f6f-1b12-41f8-9b8d-f2728f13a1f1)

![](https://2789376739-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LS9eWtaul1LPr6v0Aii%2F-LStx0WMK1yzIkAikQ6Z%2F-LStxLTyT9m3xfYZk0E_%2FDec-04-2018%2023-59-08.gif?alt=media\&token=da5ca791-5da3-4f34-b82e-90b4ed02e8fe)

## 供應商前綴字(Vendor Prefixes)

由於瀏覽器不同品牌的廠商，搶先於標準完成前就開始發佈已包含實作功能造成的結果。因為有些CSS屬性有可能在瀏覽器中是屬於實驗性質的，所以在前面加上了瀏覽器供應商的前綴字，代表是要開啟這個實驗性的CSS屬性。

![](https://2789376739-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LS9eWtaul1LPr6v0Aii%2F-LS9f-elEGx5kyAYnk63%2F-LS9f3ztWAR7aRJDhrsz%2Fbrowser.png?generation=1543146078687937\&alt=media)
