끝없는 CSS 회전 애니메이션: 아이콘을 지속적으로 회전하는 방법

CSS 애니메이션 조합인 CSS를 사용하여 아이콘을 끝없이 회전하려면 및 키프레임이 필요합니다. 다음 단계에서는 솔루션을 개략적으로 설명합니다.

1. 키프레임 추가:

두 개의 키프레임을 정의합니다. 하나는 회전 시작(0도)용이고 다른 하나는 끝(360도)용입니다. 이렇게 하면 원활한 전환이 보장됩니다.

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

2. 애니메이션 적용:

CSS 애니메이션 속성을 사용하여 회전하려는 요소에 생성된 키프레임 애니메이션을 적용합니다. 이 속성에는 키프레임 이름, 기간, 루프 동작(무한)이라는 세 가지 매개변수가 필요합니다.

  Rotate

.rotating {
  -webkit-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

3. 올바른 브라우저 호환성 문제:

다양한 브라우저 간의 호환성을 보장하기 위해 WebKit 기반 브라우저(Chrome, Safari)에 대한 공급업체 접두사 및 기타 브라우저에 대한 표준 속성을 포함합니다.

.rotating {
  -webkit-animation: rotating 2s linear infinite; /* Safari and Chrome */
  -moz-animation: rotating 2s linear infinite;    /* Firefox */
  -ms-animation: rotating 2s linear infinite;     /* IE */
  animation: rotating 2s linear infinite;         /* Standard */
}

이 단계를 따르면 CSS를 사용하여 아이콘 및 기타 요소에 대한 끝없는 회전 애니메이션을 쉽게 만들 수 있습니다.