CSS 轉場與動畫

第 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：動畫的持續時間。
• escape-in​​-out：緩動功能。
• 1s：動畫開始前的延遲。
• 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：

<button class="animated-button">Hover Me!</button>

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;
}

在此範例中：

• 按鈕懸停時會更改其背景顏色並略微向上移動。
• 點擊按鈕時，它會使用自訂動畫進行晃動。

練習運動

1. 為連結建立懸停效果，更改其顏色並使用過渡添加下劃線。
2. 創造一個以圓圈方式移動元素的關鍵影格動畫。
3. 結合過渡和動畫來創建互動式元素，例如可以在互動時縮放、更改顏色或動畫的按鈕或卡片。

---

下一步：在下一堂課中，我們將探索 CSS Flexbox 深入探究，您將學習如何充分利用 Flexbox 來創建高級的響應式佈局。請繼續關注！

---

在 LinkedIn 上關注我

裡多伊‧哈桑

以上是CSS 轉場與動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！