如何使用CSS持續旋轉圖像

使用CSS動畫來持續旋轉圖像

在建立 React Handbook（https://reacthandbook.com）的登錄頁面時，我需要搜索如何旋轉圖像。我想要旋轉一個 SVG 圖像，但這個方法適用於任何圖像類型，實際上也適用於任何 HTML 元素。

將以下 CSS 指令添加到您想要旋轉的元素中：

1	animation: rotation 2s infinite linear;

您也可以選擇將 rotate 類添加到元素中，而不是直接選擇它：

1
2
3

.rotate {
  animation: rotation 2s infinite linear;
}

通過調整 2s 的數值，可以減慢或加快旋轉周期。

然後將以下代碼添加到任何選擇器之外：

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

就這樣！您的元素現在應該旋轉起來了。

請查看CSS動畫和CSS過渡指南：

CSS Animations 和 CSS Transitions

以下是在 Codepen 中展示的結果：