無盡的CSS旋轉動畫：如何連續旋轉圖標

使用CSS實現圖標的無限旋轉，CSS動畫的組合並且需要關鍵幀。以下步驟概述了解決方案：

1。加入關鍵幀：

我們定義兩個關鍵幀，一個用於旋轉的開始（0 度），一個用於結束（360 度）。這確保了平滑過渡。

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

2.應用動畫：

我們使用 CSS 動畫屬性將創建的關鍵影格動畫套用到要旋轉的元素。此屬性需要三個參數：關鍵影格名稱、持續時間和循環行為（無限）。

  Rotate

.rotating {
  -webkit-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

3.修正瀏覽器相容性問題：

為了確保不同瀏覽器之間的相容性，我們包括基於WebKit 的瀏覽器（Chrome、Safari ）的供應商前綴和其他瀏覽器的標準屬性。

.rotating {
  -webkit-animation: rotating 2s linear infinite; /* Safari and Chrome */
  -moz-animation: rotating 2s linear infinite;    /* Firefox */
  -ms-animation: rotating 2s linear infinite;     /* IE */
  animation: rotating 2s linear infinite;         /* Standard */
}

按照這些步驟，您可以輕鬆地使用 CSS 為圖示和其他元素建立無限旋轉動畫。