아이콘에 대한 끝없는 CSS 회전 애니메이션을 어떻게 생성합니까?-CSS 튜토리얼-php.cn

아이콘에 대한 끝없는 CSS 회전 애니메이션을 어떻게 생성합니까?

Barbara Streisand

풀어 주다： 2024-11-05 21:53:02

원래의

227명이 탐색했습니다.

How do I create an endless CSS rotation animation for an icon?

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

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

1. 키프레임 추가:

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

<code class="css">@-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);
  }
}</code>

로그인 후 복사

2. 애니메이션 적용:

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

<code class="html"><div class="rotating">
  Rotate
</div></code>

로그인 후 복사

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

로그인 후 복사

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

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

<code class="css">.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 */
}</code>

로그인 후 복사

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

위 내용은 아이콘에 대한 끝없는 CSS 회전 애니메이션을 어떻게 생성합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!