什麼是@keyframes

@keyframes是CSS的一個關鍵部分，它允許我們定義一組關鍵幀，描述動畫從開始到結束的各個階段。每個關鍵幀都包含一個或多個CSS屬性的值，以指示動畫在該階段的狀態。以下是一個簡單的範例：

@keyframes slide-in {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

在上面的範例中，我們定義了一個名為 「slide-in」 的關鍵幀動畫，它描述了一個元素從左側移動到視圖內的過程。

如何使用animation屬性

animation屬性用於將關鍵幀動畫應用於HTML元素，並控制動畫的各個方面。以下是屬性的一般語法：

animation: <名稱> <持續時間> <速度曲線> <延持時間> <次數> <方向> <填充模式> <播放狀態>;

讓我們看一個範例，如何將關鍵幀動畫應用於一個元素：

.element {
  animation: slide-in 2s ease-in-out 1s infinite alternate;
}

在這個示例中，我們將名為 「slide-in」 的關鍵幀動畫應用於類名為 的元素。動畫將在2秒內以「ease-in-out」速度曲線播放，延遲1秒開始，無限次交替播放。

實際範例

1. 淡入淡出效果

@keyframes fade-in-out {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

.element {
  animation: fade-in-out 3s ease-in-out 1s infinite;
}

在這個示例中，我們創建了一個名為 「fade-in-out」 的關鍵幀動畫，它讓元素在三秒內淡入淡出，以無限次重複。

2. 旋轉效果

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

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

在這個示例中，我們創建了一個名為 「rotate」 的關鍵幀動畫，使元素以線性速度無限次旋轉。

當然還能做出許多效果，熟練使用這些，並發揮你的創意，做出令人意想不到的效果吧!