文章

CSS 過渡（Transitions）和動畫（Animations）

發布於 更新於
作者 Ned Hsu 8 分鐘閱讀

過渡與動畫

CSS 過渡（Transitions）和動畫（Animations）使網頁元素能夠在狀態之間平滑過渡，從而提高用戶體驗和視覺效果。使用過渡和動畫，你可以讓頁面更具動感，並吸引用戶的注意力。

1. CSS 過渡（Transitions）

過渡是一種讓 CSS 屬性在一段時間內平滑改變的技術。它通常用於鼠標懸停、焦點事件或其他狀態變化時的效果。要創建過渡，需要使用 transition 屬性來指定以下內容：

  • transition-property: 要進行過渡的屬性（如 width、height、background-color 等）。
  • transition-duration: 過渡所需的時間（例如 0.5s 表示 0.5 秒）。
  • transition-timing-function: 過渡的時間函數，定義過渡效果的加速度（如 ease、linear、ease-in、ease-out、ease-in-out 等）。
  • transition-delay: 過渡開始前的延遲時間。

範例

創建一個鼠標懸停時改變背景顏色的過渡效果：

1
2
3
4
5
6
7
8
9
10
11
12

.button {
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease; /* 過渡屬性、持續時間和加速度 */
}

.button:hover {
    background-color: #2ecc71; /* 鼠標懸停時的顏色變化 */
}

展示

解析

  • 當鼠標懸停在 .button 元素上時，背景顏色會在 0.3 秒內從藍色（#3498db）平滑地變為綠色（#2ecc71）。
  • 使用了 ease 函數來定義平滑的加速效果。

2. 過渡的時間函數（Transition Timing Functions）

過渡的時間函數控制過渡效果的加速度和減速度。常見的時間函數包括：

  • ease: 預設值，效果為緩進緩出。
  • linear: 線性過渡，效果為等速。
  • ease-in: 過渡效果由慢變快。
  • ease-out: 過渡效果由快變慢。
  • ease-in-out: 過渡效果開始時慢，中間加速，結束時慢。
  • 自定義貝塞爾曲線（cubic-bezier）: 可自定義的過渡效果曲線（如 cubic-bezier(0.25, 0.1, 0.25, 1)）。

3. 多個屬性的過渡

你可以指定多個屬性來同時進行過渡：

1
2
3
4
5
6
7
8
9
10
11
12

.box {
    width: 100px;
    height: 100px;
    background-color: #f39c12;
    transition: width 0.5s ease, height 0.5s ease-in, background-color 1s ease-out; /* 多個屬性的過渡 */
}

.box:hover {
    width: 200px;
    height: 200px;
    background-color: #8e44ad;
}

效果：

  • 當鼠標懸停在 .box 元素上時，寬度和高度會以不同的過渡速度和效果進行改變，背景顏色也會隨著變化。

展示

4. CSS 動畫（Animations）

CSS 動畫允許元素在一段時間內改變屬性值。通過 @keyframes 規則，可以定義一個動畫序列，並使用 animation 屬性將這個動畫應用到元素上。動畫通常比過渡更複雜，可以在特定的時間點定義不同的屬性狀態。

4.1 基本用法

創建動畫需要兩個步驟：

  1. 使用 @keyframes 定義動畫的關鍵幀（keyframes）。
  2. 使用 animation 屬性將動畫應用到目標元素。

範例

創建一個簡單的動畫，讓方塊元素在頁面上移動和改變顏色：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

@keyframes moveAndChangeColor {
    0% {
        transform: translateX(0);
        background-color: #3498db;
    }
    50% {
        transform: translateX(100px);
        background-color: #2ecc71;
    }
    100% {
        transform: translateX(0);
        background-color: #3498db;
    }
}

.animated-box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    animation: moveAndChangeColor 3s infinite; /* 應用動畫 */
}

解析：

  • 使用 @keyframes 定義名為 moveAndChangeColor 的動畫。在動畫開始（0%）、中間（50%）和結束（100%）定義了不同的屬性狀態。
  • 使用 animation 屬性將動畫應用到 .animated-box 元素，動畫持續時間為 3 秒，並無限次重複（infinite）。

4.2 動畫屬性詳解

animation 屬性包含多個子屬性，可以用於更精確地控制動畫效果：

  • animation-name: 定義要應用的動畫名稱。
  • animation-duration: 定義動畫持續時間（如 2s 表示 2 秒）。
  • animation-timing-function: 定義動畫的時間函數（如 ease、linear 等）。
  • animation-delay: 定義動畫開始前的延遲時間。
  • animation-iteration-count: 定義動畫播放次數（如 1、2 或 infinite）。
  • animation-direction: 定義動畫的播放方向（如 normal、reverse、alternate、alternate-reverse）。
  • animation-fill-mode: 定義動畫結束後的樣式狀態（如 none、forwards、backwards、both）。
  • animation-play-state: 定義動畫的播放狀態（如 running、paused）。

範例：

1
2
3
4
5
6
7
8
9

.animated-box {
    animation-name: moveAndChangeColor;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}

4.3 動畫的進階應用

可以結合多個動畫，或者在動畫中使用多個屬性來創建複雜的效果。例如，讓元素在放大縮小的同時改變顏色和透明度：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

@keyframes complexAnimation {
    0% {
        transform: scale(1);
        background-color: #e74c3c;
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        background-color: #f1c40f;
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        background-color: #e74c3c;
        opacity: 1;
    }
}

.complex-box {
    width: 100px;
    height: 100px;
    animation: complexAnimation 4s infinite;
}

展示

animated-box
complex-box

5. 過渡與動畫的應用實例

5.1 漸變的按鈕效果

1
2
3
4
5
6
7
8
9
10
11
12
13

.gradient-button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background: linear-gradient(to right, #ff7e5f, #feb47b);
    color: white;
    cursor: pointer;
    transition: background 0.5s ease;
}

.gradient-button:hover {
    background: linear-gradient(to right, #6a11cb, #2575fc);
}

展示

animated-box

5.2 簡單的彈跳效果

讓元素在頁面載入時進行彈跳效果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

.bouncing-box {
    width: 100px;
    height: 100px;
    background-color: #1abc9c;
    animation: bounce 2s infinite;
}

展示

animated-box

6. 小結

CSS 過渡和動畫提供了豐富的方式來創建動態和交互式的效果。過渡用於在元素狀態之間平滑過渡，而動畫則提供了更多的控制選項，用於創建複雜的視覺效果。通過靈活使用這些技術，可以大大提升網站的用戶體驗和吸引力。

Software, CSS
CSS
本文章以 CC BY 4.0 授權