回転させるCSS

Tweet

Category css 2019/07/21

問題

CSSでローディング用アイコンなどをくるくる回したいです。

答え

CSSを自作すると以下のような感じ。

@keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
.c-spin {animation: spin 1s linear infinite;}

なお、Font Awesome では、アニメーションするためのクラスが含まれているので、Font Awesomeを利用していたら、自作不要。

<div class="fa-3x">
  <i class="fas fa-spinner fa-spin"></i>
  <i class="fas fa-circle-notch fa-spin"></i>
  <i class="fas fa-sync fa-spin"></i>
  <i class="fas fa-cog fa-spin"></i>
  <i class="fas fa-spinner fa-pulse"></i>
</div>

https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons