CSS3 Spin Animation

您已正確實現動畫樣式，但您的動畫無法正常工作，因為您尚未定義關鍵幀動畫。

CSS3 動畫需要關鍵影格來定義動畫的開始和結束狀態。

要解決此問題，請將關鍵影格新增至 CSS 程式碼。這將定義您的元素在動畫期間如何變換。以下是如何執行此操作的範例：

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

這定義了一個關鍵幀，該關鍵幀以 0 度開始動畫並以 360 度結束。您可以自訂這些值來建立所需的動畫效果。

這裡有一個示範來說明解決方案：

div {
  margin: 20px;
  width: 100px;
  height: 100px;
  background: #f00;
  animation-name: spin;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

透過這些更改，您的元素現在應​​該連續旋轉。請記住，要讓 CSS3 動畫正常運作，您需要定義動畫樣式和動畫關鍵影格。