❒ Animation 、 Transition、Transform 差異

Animation

• 需搭配關鍵影格 @keyframes 使用，因可定義多影格，所以適用較細微的動畫，
• 運作方式：不需事件觸發網頁加載就會執行。

Transform

• 可控制元素的移動、縮放、旋轉、傾斜。
• 運作方式：不需事件觸發網頁加載就會執行。
• transform 可於 animation 中被當屬性運用。

Transition

• Transition 只能定義開始和結束狀態，不適用較細微的動畫。
• 運作方式：需事件觸發動畫才會開始，動畫為一次性，無法重覆發生除非一再觸發。

❒ Animation 動畫

Animation 結構

animation 需搭配關鍵影格 @keyframes 使用。@keyframes 內部結構有兩種寫法：

• from 與 to ：只能定義頭語尾的影格變化。
• % ：可以定義更多階段的影格變化。

/*方式一：使用 @keyframes 定義，後面customname為自訂名稱，搭配 form to 頭尾的撰寫方式 */
@keyframes customname {
  /* 定義每個階段的影格變化  */
  from {
    /* 定義元素在該影格所套用的樣式 */
    ..
  }
  to {
    ..
  }
}
/*方式二：使用 @keyframes 定義，後面customname為自訂名稱，搭配％的撰寫方式 */
@keyframes customname {
  /* 定義每個階段的影格變化  */
  0% {
    /* 定義元素在該影格所套用的樣式 */
    ..
  }
  50% {
    ..
  }
	100% {
    ..
  }
}

animation 屬性

這邊只列出一些常用的屬性

• animation-name → 要執行的 animation 名稱。
• animation-duration → 執行過程秒數。
• animation-play-state → 播放狀態，預設是 running。
  • 狀態可設定 pause 搭配 :hover 。
• animation-timing-function → 動畫的加速速率。
• animation-delay → 延遲多少時間發動 animation。
• animation-iteration-count → 動畫要重複播放幾次。
  • 屬性值 infinite 為一直持續跑
• animation-fill-mode → 動畫未播放或動畫完成時，要停在哪個影格 ( 呈現的樣子 )。
  • none 預設值，動畫執行前或之後不會對元素產生任何樣式。
  • forward 停留在最後一個影格位置( 結束時的狀態 )。
  • backwards 留在第一個影格位置 ( 開始時的狀態 )。
  • both 擁有 forward 與 backwards 兩者功能，依據開始或結束決定呈現的狀態。
• animation-direction → 是否要循環交替反向播放動畫。
  • normal 預設值，動畫正常播放
  • reverse 動畫反向播放
  • alternate 動畫在奇數時正向播放，偶數值反向播放。
  • alternate-reverse 動畫在奇數時反向播放，偶數值正向播放。

Animation 使用方式：

1. 建立影格 @keyframes，並自訂名稱
   1. 有兩種撰寫方式，可看上方的「 Animation 結構 」。
2. animation 載入影格
   1. animation 需對應一個 @keyframes 自訂名 ( animation-name：@keyframes 自訂名; )。
   2. 須包含兩個以上的屬性才能運作。

註 ：如果不想要使用 animation-fill-mode:both; ，可於 @keyfarmes 中的開始與結束數值寫一樣並搭配 animation-iteration-count : infinite;，就會很順的重複跑。 Codepen 範例

實作 1. Animation 使用 from 與 to 讓物件移至右方再回來原點

CodePen 範例

實作 2. Animation 使用 % 讓物件繞一圈正方形

CodePen 範例

❒ Transition 轉場效果

transition 屬性

• transition-duration : 動畫播放的時間。
• transition-timing-function：動畫執行過程的速度變化。
• transition-delay：延遲多少時間再發動動畫。
• transition-property：要更精確地掌控，可定義哪些 CSS 屬性有轉場的動畫效果
  • all : 預設，所有 CSS 都要轉場。
  • none : 沒有任何 CSS 要轉場。
  • property：屬性值可以是要轉場的 CSS 屬性名稱，以逗號區隔，屬性名稱例如 width、height。

transition-timing-function 屬性們的效果

• ease : 緩慢開始 → 中間變快 → 慢慢結束。
• linear：從開始到結束的速度一致。
• ease-in：緩慢開始。
• ease-out：緩慢結束。
• ease-in-out：緩慢開始和緩慢的結束。
• steps(int,start|end)：逐格動畫，沒有過度效果，而是一幀一幀的變化，所以指定格數越多動畫看起來會越滑順。
  • 第一個參數 int 為指定間格數。
  • 第二個參數有 start|end 可選，若選 start 表示開始值不動。
• cubic-bezier(n, n, n, n)：為二次貝茲曲線，利用兩個控制點決定一個曲線，可搭配 cubic-bezier.com 來使用。
  • n 值可填 0 ~ 1 之間的數字。

詳細動畫效果可參考此篇文章 CSS transition 各種速率

實作 1. Transition 轉場效果，hover 時物件寬度變大

CodePen 範例

實作 1. Transition 轉場效果使用 transition-property

CodePen 範例

• 範例中使用 transition-property: width; ，明確指定只有寬度要轉場效果，可見滑鼠滑入時高度是沒有轉場效果的。

❒ Transform

• 可控制元素的旋轉、縮放、移動 等，但不適用「 行內元素 」。
• transform 可於 animation 中被當屬性運用。

Transform 屬性

• translate 移動：
  • 單位：百分比或尺寸值 ( px 等 )
  • 屬性值：translate(X軸, Y軸) | translateX() | translateY() | translateZ() | translate3d()
  • translateX()、 translateY() 可縮寫為 translate(X軸, Y軸) 。
• scale 縮放：
  • 單位：須為倍數
  • 屬性值：scaleX() | scaleY() | scaleZ() | scale3d()。
  • X 軸與 Y 軸會以同倍率縮放。
  • CodePen 範例
• rotate 旋轉：
  • 單位：deg
  • 屬性值：rotateX() | rotateY() | rotateZ() | rotate3d()。
• skew 傾斜：
  • 單位：deg
  • 屬性值：skew(X軸, Y軸)。

❒ Animation 效果的套件

1. Animate.css 套件

2. AOS 套件

❒ 動畫效果建議使用會佔據空間的屬性

以 opacity、transform、display、visibility 屬性為例。

會佔據空間的屬性

1. opacity
2. transform
3. visibility

不會佔據空間的屬性

1. display

為什麼建議使用會佔據空間的屬性？

如果要做動畫效果會建議使用會佔據空間的屬性，這樣當某元素執行動畫效果時，不會影響其他元素的位置變得大家都在動，使用者體驗會比較好。

Codepen 範例

參考資訊

• Day27：小事之 Transition 與 Animation
• CSS動畫-Transition、Animation、Transform的分析比較
• W3school - CSS Animations
• 一個工具，帶你完整認識 CSS Animation
• CSS transition 各種速率
• CSS Transition屬性的4個操作
• 六角學院