CSS入門-Day9：過渡與動畫

更新於 2024/08/08發佈於 2024/08/08閱讀時間約 8 分鐘

過渡效果

過渡效果（Transitions）使 CSS 屬性的變化更加平滑，從一個值逐漸過渡到另一個值。

基本語法

過渡效果的基本語法包括 transition-property、transition-duration、transition-timing-function 和 transition-delay。

.element {
  transition-property: background-color;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
  transition-delay: 0.5s;
}

簡寫語法

可以使用簡寫語法將所有屬性合併在一起。

.element {
  transition: background-color 2s ease-in-out 0.5s;
}

過渡效果示例

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>過渡效果示例</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      transition: background-color 1s, transform 1s;
    }
    .box:hover {
      background-color: lightcoral;
      transform: rotate(45deg);
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

在這個示例中，當鼠標懸停在 .box 元素上時，背景顏色和旋轉角度會在 1 秒內平滑過渡。

動畫效果

動畫效果（Animations）允許你更精細地控制一個元素的多個屬性隨時間變化的過程。

基本語法

動畫效果的基本語法包括 @keyframes 規則來定義動畫，和 animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction 等屬性來應用動畫。

@keyframes example {
  from {background-color: lightblue;}
  to {background-color: lightcoral;}
}

.element {
  animation-name: example;
  animation-duration: 4s;
}

簡寫語法

可以使用簡寫語法將所有屬性合併在一起。

.element {
  animation: example 4s linear infinite;
}

動畫效果示例

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>動畫效果示例</title>
  <style>
    @keyframes move {
      0% {transform: translateX(0);}
      50% {transform: translateX(100px);}
      100% {transform: translateX(0);}
    }
    .box {
      width: 100px;
      height: 100px;
      background-color: lightgreen;
      animation: move 2s infinite;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

在這個示例中，.box 元素會在 2 秒內水平移動 100 像素，然後返回原位，並且這個動畫會無限次重複。

實踐案例

我們將通過一個更複雜的示例來實踐過渡效果和動畫效果的綜合應用。

案例：互動按鈕

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>互動按鈕示例</title>
  <style>
    .button {
      display: inline-block;
      padding: 10px 20px;
      color: white;
      background-color: #3498db;
      text-transform: uppercase;
      text-decoration: none;
      font-weight: bold;
      transition: background-color 0.3s, transform 0.3s;
      position: relative;
      overflow: hidden;
    }
    .button::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 300%;
      height: 300%;
      background-color: rgba(255, 255, 255, 0.3);
      transform: translate(-50%, -50%) scale(0);
      transition: transform 0.6s;
      border-radius: 50%;
    }
    .button:hover {
      background-color: #2980b9;
      transform: scale(1.05);
    }
    .button:hover::before {
      transform: translate(-50%, -50%) scale(1);
    }
  </style>
</head>
<body>
  <a href="#" class="button">Hover Me</a>
</body>
</html>