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