CSS3 建構過程，時常會需要用到動畫設計，所以就將相關的參數及使用記錄下來，方便之後查詢及使用~

瀏覽器前綴

在使用任何CSS3高級屬性時，建議都要搭配瀏覽器前綴，讓屬性效果可以在各瀏覽器有更好的支援

-moz-{屬性}：Firefox 瀏覽器。
-webkit-{屬性}：Safari, Chrome, Opera 等瀏覽器。
-o-{屬性}： Opera 瀏覽器。
-ms-{屬性}： IE 瀏覽器。

Transition

Transition 可以用來設定基礎的動畫效果，直接指定要產生變化的css屬性

需注意的是，並非所有css屬性都有支援 transition，可以參考這裡

.set_background{
    background: black;
    transition: background 0.3s linear;
}
.set_background:hover{
    background:white;
    transition: background 0.3s linear;
}

通常需要跨瀏覽器支援的情況，要用下面的方式來寫會比較保險

.set_background{
    background: black;
    -webkit-transition: background 0.3s linear;
    -moz-transition: background 0.3s linear;
    -o-transition: background 0.3s linear;
    -ms-transition: background 0.3s linear;
    transition: background 0.3s linear;
}

其實，Transition 有包含下面幾個屬性，只是通常我們都會簡寫成一行

名稱 說明
transition-property 指定要做 transition 的CSS屬性
transition-duration transition 執行時間(s or ms)
transition-delay 延遲執行時間 (s or ms)
transition-timing-function 動態執行參數

並且，transition-duration 與 transition-delay 有前後關係

另外，transition-timing-function 常見參數有以下幾個

  • linear: 平均速度
  • ease: 快入緩出 (預設)
  • ease-in: 緩入
  • ease-out: 緩出
  • ease-in-out: 緩入緩出
  • cubic-bezier: 自定義速度模式

Animation

使用 animation 可以製作比較複雜的css3動態效果

可以搭配 frome to 的方式來設定動畫

.set_background{
    animation: 0.9s myCustomAnimate
}

@keyframes myCustomAnimate{
	from {background: black;}
  to {background: white;}
}

也可以用百分比(%)的方式來設定

.set_background{
    animation: 0.9s myCustomAnimate
}

@keyframes myCustomAnimate{
	0% {background: black;}
  50% {background: yellow;}
  100% {background: white;}
}

Animation 包含了下面所列的屬性，可以分別應用

名稱 說明
animation-name 動畫名稱
animation-duration 動畫執行1次所需的時間(s or ms)
animation-timing-function 動態執行參數
animation-delay 延遲執行時間 (s or ms)
animation-iteration-count 播放次數 (可設定數字或 infinite設定為無限)
animation-direction 播放方向/順序
animation-fill-mode 指定動畫播放完畢的狀態
animation-play-state 指定動畫播放或暫停

此外，

animation-direction 有下列參數可以使用

  • normal(正常播放)
  • reverse (反向播放)
  • alternate (正向撥放，再反向播放)
  • alternate-reverse (反向撥放，再正向播放)

animation-fill-mode 有下列參數可以使用

  • none (回到最初未撥放狀態)
  • forwards (停在最後一個狀態)
  • backwards (停在第一個狀態)
  • both (停留在 animation-direction 最後一個狀態)

animation-play-state 必須獨立設定，並且有兩個屬性可以使用

  • running (預設播放)
  • paused (暫停播放)

Transform

CSS3 的 transform 屬性可以控制HTML元素，讓網頁元素做出旋轉、縮放、移動等效果

類型 參數 說明
轉換 translateX(x) 1D轉換，從參考點向 X軸移動 x距離
轉換 translateY(y) 1D轉換，從參考點向 Y軸移動 y距離
轉換 translateZ(z) 1D轉換，從參考點向 Z軸移動 z距離
轉換 translate(x,y) 2D轉換，從參考點向 X軸移動 x距離，Y軸移動 y距離
轉換 translate3d(x,y,z) 3D轉換，從參考點向 X軸移動 x距離，Y軸移動 y距離，Z軸移動 z距離
縮放 scaleX(x) 2D縮放，從參考點向 X軸縮放
縮放 scaleY(y) 2D縮放，從參考點向 Y軸縮放
縮放 scaleZ(z) 2D縮放，從參考點向 Z軸縮放
旋轉 rotateX(n) 從X軸為參考點旋轉n角度
旋轉 rotateY(n) 從Y軸為參考點旋轉n角度
旋轉 rotateZ(n) 從Z軸為參考點旋轉n角度
旋轉 rotate(n) 從中心為參考點旋轉n角度
旋轉 rotate3d(x,y,z,n) 3D旋轉，從設定參考點中心旋轉n角度
傾斜 skewX(n) 從X軸為參考點傾斜n角度
傾斜 skewY(n) 從Y軸為參考點傾斜n角度
矩陣 matrix(n1, n2, n3, n4, n5, n6) 2D動畫，設定 6 個值設定變化效果
矩陣 matrix(n1, n2, ………., n16) 3D動畫，設定 16 個值設定變化效果

使用方式如下:

.my_box:hover{
  -webkit-transform: translateX(-50%) scale3d(1,1,1);
  -ms-transform: translateX(-50%) scale3d(1,1,1);
  transform: translateX(-50%) scale3d(1,1,1);
  -webkit-transition: -webkit-transform .22s ease-in;
  -ms-transition: -ms-transform .22s ease-in;
	transition: transform .22s ease-in;
}

但是，在實際運用 CSS3 transform 時，必須要留意效能問題

畢竟 transform 會透過操作 DOM 座標或內容來運算出特效變化，同一頁面中，要避免使用太多