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

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

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

animation: rotation 2s infinite linear;

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

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

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

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

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

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

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

CSS AnimationsCSS Transitions

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

[在 CodePen 上查看 如何使用 CSS 動畫持續旋轉圖像 ](https://codepen.io/flaviocopes/pen/zyyJpL/) - 作者:Flavio Copes