新手指南：CSS transition 屬性簡介與應用

更新日期： 2024 年 9 月 14 日

在現代網頁設計中，動畫效果可以提升用戶的互動體驗。

CSS transition 屬性允許你在兩個狀態之間創造平滑的過渡效果。它可以應用在元素的樣式變化上，如顏色、大小、位置等，從而讓頁面看起來更自然。

什麼是 transition？

transition 是一個 CSS 屬性，用來控制當元素狀態改變時，樣式變化的過渡效果。

比如：當滑鼠懸停在按鈕上，按鈕的背景顏色或大小會隨著一段時間內平滑變化，而不是瞬間完成。

基本語法

transition: property duration timing-function delay;

• property：指定要過渡的 CSS 屬性（例如 background-color 或 width），可以使用 all 來過渡所有可變屬性。
• duration：過渡持續的時間（例如 0.5s 表示 0.5 秒）。
• timing-function：指定過渡的加速度方式（例如 ease、linear、ease-in、ease-out）。
• delay：過渡開始前的延遲時間（例如 0.2s）。

在 CSS transition 中，四個屬性不是必填的。

你可以只填一個或兩個屬性。最常見的組合是 property 和 duration，它們是最基本的：

transition: background-color 0.5s;

這裡僅指定了 background-color 和持續時間 0.5s。如果不填其他屬性，瀏覽器會使用默認值：

• timing-function 默認值是 ease（平滑的加速和減速）。
• delay 默認值是 0s（即沒有延遲）。

常見的 transition 應用

改變顏色

div {
    background-color: red;
    width: 200px;
    height: 200px;
    transition: background-color 0.5s ease;
}

div:hover {
    background-color: blue;
}

當滑鼠懸停時，div 的背景顏色會平滑地從紅色變為藍色。

改變尺寸

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  transition: width 0.4s ease-in-out;
}

.box:hover {
  width: 200px;
}

這個例子展示了當滑鼠懸停時，box 的寬度將在 0.4 秒內從 100px 平滑地變為 200px。

複合過渡

你可以同時過渡多個屬性：

button {
    background-color: lightgray;
    transform: scale(1);
    transition: background-color 0.3s ease, transform 0.3s ease;
    padding: 10px 20px;
    border: none;
    font-size: 16px;
    cursor: pointer;
}

button:hover {
    background-color: green;
    transform: scale(1.2); /* 放大按鈕 */
    color: white;
}

這裡按鈕會在背景色變化的同時放大，讓動畫效果更加豐富。

結語

CSS transition 是創建流暢動畫效果的簡單工具，適合在網頁中應用各種樣式過渡效果，提升頁面動態性和用戶體驗。

無論是改變顏色、大小，還是旋轉元素，transition 都能讓網頁更加自然生動。希望這篇文章能幫助你理解並應用 transition，讓你的設計更上一層樓！