CSS transition 各種速率

今天要介紹的是CSS transition中的timing-function，transition語法在CSS3動態中是相當容易被使用，如果再改變他的timing-function，可以獲得更豐富的效果。

參考 : http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp
http://devdocs.io/css/transition-timing-function

Demo中的共通sass

div
	width: 50px
	height: 50px
	background: red
	+transition-property(margin-left)
	+transition-duration(5s)

.demo:hover > div
	margin-left: calc(100% - 50px)

DEMO開始

各種transition-timing-function的效果(安安，你們會卡嗎?我好卡)，主要有以下幾種屬性。

+transition-timing-function(ease) 
//緩慢的開始，中間變快，又變慢慢結束。相當於cubic-bezier(0.25,0.1,0.25,1)。

+transition-timing-function(ease-in)
//ease-in：緩慢的開始。相當於cubic-bezier(0.42,0,1,1)。	

+transition-timing-function(ease-out)
//ease-out：緩慢的結束。相當於cubic-bezier(0,0,0.58,1)。	

+transition-timing-function(ease-in-out)
//ease-in-out：緩慢的開始和結束。相當於cubic-bezier(0.42,0,0.58,1)。	

+transition-timing-function(linear)
linear：表示從開始到結束的速度一致。相當於cubic-bezier(0,0,1,1)。

+transition-timing-function(cubic-bezier(0.1, 0.7, 1.0, 0.1))
cubic-bezier(n,n,n,n)：自由定義cubic-bezier函數，每個值為0到1之間的數字。
cubic-bezier

+transition-timing-function(step-start)	
+transition-timing-function(step-end)
//這兩個....是來鬧得?

+transition-timing-function(steps(4, end))
//分為4個階段

Togather!

ease

ease-in

ease-out

ease-in-out

linear

cubic-bezier

step-start

step-end

steps(4, end)

撰寫一篇文章需要花上非常多的時間，如果你關閉 Adblock (廣告阻擋器)，我會非常的開心 🤗。 (╭(°A°`)╮))

上一篇：Web Font的基本設定

下一篇： Sass HSL function