為什麼我的 CSS3 旋轉動畫不起作用？

CSS3 旋轉動畫

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

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

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

<code class="css">@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}</code>

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

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

<code class="css">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);
  }
}</code>

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

以上是為什麼我的 CSS3 旋轉動畫不起作用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！