[CSS] 간단한 아이콘 회전 애니메이션 [Tailwind CSS]

완전 초 간단한 회전 애니메이션

.spin-object {
  animation: spin 5000ms infinite linear;
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

 

 

[CSS] icon 회전하기 / <i> 태그 회전하기

위에서 설명한 아이콘 회전 + 크기 조절을 적용하면

.spin-object {
  animation: spin 5000ms infinite linear;
}

@keyframes spin {
  from {
    -moz-transform: scale(0) rotate(0deg);
    -ms-transform: scale(0) rotate(0deg);
    -o-transform: scale(0) rotate(0deg);
    transform: scale(0) rotate(0deg);
  }
  to {
    -moz-transform: scale(100%) rotate(360deg);
    -ms-transform: scale(100%) rotate(360deg);
    -o-transform: scale(100%) rotate(360deg);
    transform: scale(100%) rotate(360deg);
  }
}