웹 개발/소소한 팁, 버그 해결
[CSS] 간단한 아이콘 회전 애니메이션 [Tailwind CSS]
마라턍
2024. 3. 20. 02:00
완전 초 간단한 회전 애니메이션
.spin-object {
animation: spin 5000ms infinite linear;
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
[CSS] icon 회전하기 / <i> 태그 회전하기
CSS에서 transform를 rotate를 이용해 회전했을 때, 아이콘이 회전하지 않는 경우가 있다. 결론만 말하면, 아래의 속성을 추가해준다. .rotate-45 { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-tran
hotsunchip.tistory.com
위에서 설명한 아이콘 회전 + 크기 조절을 적용하면
.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);
}
}