끝없는 CSS 회전 애니메이션을 만드는 방법은 무엇입니까?

끝없는 CSS 회전 애니메이션 구현

문제:

제공된 코드인 CSS를 사용하여 로딩 아이콘을 계속 회전시키려는 경우 원하는 애니메이션을 제작하지 못했습니다. CSS를 사용하여 이 회전을 효과적으로 수행하려면 어떻게 해야 합니까?

해결책:

CSS를 사용하여 무한 회전을 수행하려면 다음 단계를 수행하십시오.

1. CSS 애니메이션 키프레임 추가:

   • @keyframes 표기법으로 회전 키프레임을 정의합니다.
   • 회전 변환에 대한 시작 및 종료 상태를 설정합니다.

2. 대상 요소에 애니메이션 적용:

   • CSS에서 회전 클래스를 만듭니다.
   • 애니메이션 적용 animation-name, animation-duration, animation-iteration-count를 사용하여 원하는 요소에 추가합니다.

3. 공급업체 접두사 포함:

   • 브라우저 간 호환성을 위해 -webkit-, -moz- 등의 접두사를 추가하세요.

예제 코드:

<code class="css">@-webkit-keyframes rotating {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotating {
  -webkit-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}</code>

Html:

<code class="html"><div 
  class="rotating"
  style="width: 100px; height: 100px; line-height: 100px; text-align: center;" 
 >Rotate</div></code>

이 수정된 코드는 끝없는 반복으로 요소의 지속적인 회전을 보장하여 이전 시도에서 직면한 문제를 해결합니다.

위 내용은 끝없는 CSS 회전 애니메이션을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!