如何使用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!