CSS 動畫屬性介紹

1. transition

transition 屬性用於定義元素在樣式變化時的平滑過渡效果，適用於屬性值改變的場景（如 background-color、width 等）。它不需定義關鍵幀，適合簡單的動畫效果。

• 主要子屬性：

  • transition-property：指定要過渡的 CSS 屬性（如 background-color、width）。預設為 all，表示所有可過渡的屬性。

  • transition-duration：設定過渡效果的持續時間（以秒 s 或毫秒 ms 為單位）。

  • transition-timing-function：定義過渡的速度曲線，常用值包括 ease（慢-快-慢）、linear（均速）、ease-in（慢速開始）、ease-out（慢速結束）。

  • transition-delay：設定過渡開始前的延遲時間。

  • 縮寫形式：transition: property duration timing-function delay;

    • 範例：transition: background-color 0.5s ease 0.2s;

• 適用場景：滑鼠懸停（:hover）或狀態改變時的平滑效果。

2. transform

transform 屬性用於對元素進行2D 或 3D 變形，例如平移、旋轉、縮放或傾斜。它本身不會產生動畫效果，通常搭配 transition 或 animation 實現動態變化。

• 常用值：

  • translate(x, y)：平移元素（例如 translate(50px, 0) 向右移動 50px）。

  • rotate(angle)：旋轉元素（例如 rotate(45deg) 旋轉 45 度）。

  • scale(x, y)：縮放元素（例如 scale(1.5) 放大 1.5 倍）。

  • skew(x-angle, y-angle)：傾斜元素（例如 skew(10deg, 0)）。

• 適用場景：改變元素的位置、大小或形狀，常與 transition 或 animation 結合。

3. animation

animation 屬性用於創建基於 關鍵幀（@keyframes） 的動畫，適合複雜的動畫效果。它可以控制動畫的播放次數、方向、延遲等。

• 主要子屬性：

  • animation-name：指定 @keyframes 的名稱。

  • animation-duration：動畫完成一次的時間。

  • animation-timing-function：速度曲線，類似 transition 的選項。

  • animation-delay：動畫開始前的延遲。

  • animation-iteration-count：播放次數（數字或 infinite）。

  • animation-direction：播放方向（normal、reverse、alternate）。

  • animation-fill-mode：動畫結束後的樣式（none、forwards、backwards）。

  • animation-play-state：控制動畫狀態（running 或 paused）。

  • 縮寫形式：animation: name duration timing-function delay iteration-count direction fill-mode;

    • 範例：animation: slide 2s ease-in-out 0s infinite alternate forwards;