CSS Transforms / Transitions / Animations

Transforms 變型

原始型態、屬性沒有被改變，原始物件像穿上變身裝一樣，可以視覺上被模擬 2D/3D 的變型：旋轉，縮放，移動，歪斜...w3c Transforms

/* e.g. transform rotate() */
transform: rotate(7deg);

• Syntax：

  transform: none 無 | transform-functions 函數 | initial 初始 | inherit 繼承;
  

• Transforms-functions 函數類：

  matrix 矩陣、translate 移動、scale 大小、rotate 旋轉、skew 歪斜、perspective 透視
  

Transitions 過渡

改變的是物件本質，改變屬性 "數值"，並是在給定的 "時間" 內，以 "漸漸變化 (過渡)" 的方式。 w3c transition

/* e.g. transition shorthands */
transition: width 2s linear 1s;

• Syntax：

  transition: property 屬性 duration 週期 timing-function 時間函數 delay 延遲;
  

• Property：

  property : 可計算的屬性值：距離、大小、顏色、等屬性值；initial 初始、inherit 繼承;
  

Animations 動畫

@keyframe 以進度來安排一組 style 值過渡成新值的方法。 Animations 加入操作 @keyframe move 的屬性。w3c Animations

/* 動畫名稱 */ 
@keyframes mymove {
    from {left: 0px;}
    to {left: 300px;}
}
.div1 { animation: mymove 5s linear infinite;}

• Syntax：

  animation: name 動畫名稱 duration 週期 timing-function 時間函數 delay 延遲 iteration-count 循環次數 direction 方向 fill-mode 結束模式 play-state 播放狀態
  /* initial 初始、inherit 繼承 */