CSS 轉場與動畫

首頁 > 程式設計 > CSS 轉場與動畫

CSS 轉場與動畫

發佈於2024-11-03

CSS Transitions and Animations

第 7 講：CSS 過渡與動畫

在本次講座中，我們將探討如何使用 CSS 轉場和動畫來讓您的網頁栩栩如生。這些技術可讓您創建流暢、引人入勝的效果，從而增強使用者體驗，而無需 JavaScript。

CSS 過渡簡介

CSS 過渡可讓您在指定的持續時間內平滑地變更屬性值。它們非常適合創建懸停效果、按鈕動畫和其他互動元素。

1.基本文法

要建立過渡，您需要指定要過渡的 CSS 屬性、持續時間和可選的緩動函數。

例子：

  .button {
    background-color: #4CAF50;
    transition: background-color 0.3s ease;
  }

  .button:hover {
    background-color: #45a049;
  }

在此範例中，按鈕懸停時背景顏色在 0.3 秒內平滑變化。

2.轉換多個屬性

您可以用逗號分隔多個屬性來一次轉換它們。

例子：

  .box {
    width: 100px;
    height: 100px;
    background-color: #333;
    transition: width 0.5s, height 0.5s, background-color 0.5s;
  }

  .box:hover {
    width: 150px;
    height: 150px;
    background-color: #555;
  }

此範例在懸停時平滑地變更框的寬度、高度和背景顏色。

3.緩動函數

緩動函數控制不同點的過渡速度，創造緩入、緩出或兩者兼具的效果。

常用緩動函數：
- ease：緩慢開始，然後加速，然後再減速。
- 線性：保持恆定速度。
- Easy-in：緩慢開始，然後加速。
- 緩出：快速開始，然後減慢。

CSS 動畫簡介

CSS 動畫可讓您隨著時間的推移創建更複雜的變化序列，而不僅僅是簡單的過渡。您可以為多個屬性設定動畫、控制時間並建立關鍵影格以實現更好的控制。

1.基本文法

要建立動畫，請定義關鍵影格並使用動畫屬性將它們套用到元素。

例子：

  @keyframes example {
    0% {background-color: red; left: 0px;}
    50% {background-color: yellow; left: 100px;}
    100% {background-color: green; left: 0px;}
  }

  .animate-box {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: red;
    animation: example 5s infinite;
  }

在此範例中：

@keyframes 規則定義動畫步驟，更改背景顏色和位置。
.animate-box 類別應用程式動畫，該動畫運行 5 秒並無限重複。

2.控制動畫時間

您可以控制動畫的時間、延遲和迭代次數。

例子：

  .animate-box {
    animation: example 5s ease-in-out 1s 3 alternate;
  }

5s：動畫的持續時間。
ease-in-out: 緩動函數。
1s：動畫開始前的延遲。
3：動畫會重複3次。
交替：動畫將在每次迭代時反轉方向。

3.結合過渡與動畫

您可以結合使用轉場和動畫來創造更多動態效果。

例子：

  .button {
    background-color: #4CAF50;
    transition: transform 0.3s ease;
  }

  .button:hover {
    transform: scale(1.1);
  }

  @keyframes pulse {
    0% {transform: scale(1);}
    50% {transform: scale(1.2);}
    100% {transform: scale(1);}
  }

  .pulse-button {
    animation: pulse 1s infinite;
  }

這個例子：

.button 類別使用過渡來在懸停時稍微縮放按鈕。
.pulse-button 類別使用動畫來創造連續的脈衝效果。

實際範例：

讓我們結合過渡和動畫來創建一個響應式、互動式按鈕。

HTML:

CSS:

.animated-button {
  padding: 15px 30px;
  font-size: 16px;
  color: white;
  background-color: #008CBA;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.animated-button:hover {
  background-color: #005f73;
  transform: translateY(-5px);
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

.animated-button:active {
  animation: shake 0.5s;
}

在此範例中：