transition、animation 和 transform 都是 CSS 屬性，用於建立視覺效果，但它們的工作方式和用途不同：
1. transform (變換):
- 作用:
transform用於改變元素的形狀、大小、位置和方向，但不改變元素的初始狀態和最終狀態之間的中間狀態。它就像一次性地將元素從一個狀態改變到另一個狀態，沒有動畫過程。 - 常用屬性值:
translate(x, y): 平移rotate(angle): 旋轉scale(x, y): 縮放skew(x-angle, y-angle): 傾斜matrix()：矩陣變換，可以組合多種變換效果
- 示例:
transform: rotate(45deg);會立即將元素旋轉 45 度，沒有動畫過渡。 - 關鍵特點:
transform本身不產生動畫，它只是改變元素的視覺呈現。要實現動畫效果，需要結合transition或animation使用。
2. transition (過渡):
- 作用:
transition提供了一種在兩種狀態之間平滑過渡的方式。當元素的某些屬性發生變化時（例如:hover、:focus或 JavaScript 修改），transition會使這些變化以動畫的形式展現，而不是突變。 - 常用屬性:
transition-property: 指定要過渡的屬性 (例如width,height,background-color,transform等)。transition-duration: 過渡的持續時間。transition-timing-function: 過渡的速度曲線 (例如ease,linear,ease-in-out等)。transition-delay: 過渡的延遲時間。
- 示例:
transition: width 2s ease-in-out;當元素的寬度發生變化時，會在 2 秒內以ease-in-out的速度曲線進行過渡。 - 關鍵特點:
transition需要觸發，通常是透過改變元素的屬性值來觸發。它只能實現簡單的、從一個狀態到另一個狀態的動畫。
3. animation (動畫):
- 作用:
animation允許建立更復雜的動畫序列，可以定義多個關鍵幀和更精細的控制。它不需要像transition那樣依賴於狀態的變化來觸發。 - 常用屬性:
animation-name: 動畫的名稱，與@keyframes規則關聯。animation-duration: 動畫的持續時間。animation-timing-function: 動畫的速度曲線。animation-delay: 動畫的延遲時間。animation-iteration-count: 動畫的播放次數 (例如infinite表示無限迴圈)。animation-direction: 動畫的方向 (例如normal,reverse,alternate等)。
- 示例:
@keyframes my-animation {
0% { transform: translateX(0); }
50% { transform: translateX(100px); }
100% { transform: translateX(0); }
}
.element {
animation: my-animation 2s infinite;
}
- 關鍵特點:
animation更加靈活，可以建立複雜的動畫效果，並且可以透過@keyframes規則精確控制動畫的每個階段。
總結:
| 特性 | transform |
transition |
animation |
|---|---|---|---|
| 作用 | 變換元素 | 狀態過渡 | 複雜動畫 |
| 觸發方式 | 直接應用 | 屬性變化 | 透過 animation 屬性 |
| 動畫控制 | 無 | 簡單控制 | 精細控制 |
| 複雜度 | 低 | 中 | 高 |
通常情況下，transform 會與 transition 或 animation 結合使用，例如使用 transition 來實現平滑的旋轉效果 (transition: transform 2s ease;)，或者使用 animation 來建立更復雜的位移動畫。 單獨使用 transform 只會改變元素的最終狀態，而不會產生動畫效果。