Transition & Transform 動畫設計

簡單來說，transition是過程，transform是結果。

Transition 用途-漸變的效果與時間

transition-duration 轉換需要的時間

transition-duration: time|initial|inherit

transition-delay 延遲多久開始轉化

transition-delay: time|initial|inherit

transition-property 指定要轉換的屬性

1. none
2. all 全部屬性
3. 某個屬性，若有多個使用,分開

transition-timing-function

1. ease (default)慢-快-慢
2. ease-in 慢-快
3. ease-out 快-慢
4. ease-in-out 慢-漸快-漸慢
5. linear 相同速度
6. cubic-bezier(x1,y1,x2,y2)

transition 簡易表示法

順序不拘，中間僅需空格即可

transition: property duration timing-function delay

hover 與 transition 實作

CodePen

Transform 用途-最終改變的樣子

2D變形效果

1. translate(x,y)|translateX(x)|translateY(y) 移動X軸Y軸
2. scale(x,y)|scaleX(x)|scaleY(y) 縮放X軸Y軸，也可用一個數值，代表X，Y變形一樣
3. rotate(?deg) 旋轉，有正負之分(順時針/逆時針)
4. skew(x,y)|skewX(x)|skewY(y) 傾斜X軸Y軸

2D變形的基準點

transform-origin: X軸 Y軸|或是一個數值
(left,center,right,top,bottom.%)