> 웹 프론트엔드 > CSS 튜토리얼 > 끝없는 CSS 회전 애니메이션을 만드는 방법은 무엇입니까?

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

DDD
풀어 주다: 2024-11-06 13:12:02
원래의
760명이 탐색했습니다.

How to Create an Endless CSS Rotation Animation?

끝없는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿