如何使用CSS連續旋轉圖像

如何使用CSS動畫連續旋轉圖像

在建立反應手冊登陸頁面，我不得不搜索如何旋轉圖像。我想旋轉一個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過渡導遊

這是Codepen中顯示的結果：

看筆如何使用CSS動畫連續旋轉圖像由Flavio Copes（@flaviocopes） 在密碼筆。

Tech Wiki Online!