CSS 회전 애니메이션

이승훈·2024년 9월 27일
.rotate {
  width: 100px;
  height: 100px;
  animation: rotateAnimation 4s infinite;
}

/* 애니메이션 정의 */
@keyframes rotateAnimation {
  0% {
    transform: rotate(0deg); /* 초기 상태 */
  }
  50% {
    transform: rotate(360deg); /* 시계 방향으로 360도 회전 */
  }
  100% {
    transform: rotate(-360deg); /* 반시계 방향으로 다시 회전 */
  }
}
profile
안녕하세요!

0개의 댓글