내 CSS3 스핀 애니메이션이 Chrome에서 작동하지 않는 이유는 무엇입니까?

CSS3 스핀 애니메이션

제공된 HTML 코드에서 다양한 CSS3 애니메이션 속성을 div 요소에 적용했습니다. 하지만 최신 안정 버전의 Chrome을 사용해도 애니메이션이 작동하지 않는 것 같습니다.

CSS3 애니메이션 이해

CSS3 애니메이션을 효과적으로 사용하려면 다음과 같은 특정 단계를 따라야 합니다.

1. 애니메이션 속성 정의: animation-name, animation-duration, animation-iteration-count, animation-timing-과 같은 요소의 애니메이션 속성을 정의해야 합니다. 기능을 사용하세요.
2. 애니메이션 키프레임 정의(코드에 없음): @keyframes 규칙을 사용하여 실제 애니메이션 키프레임을 설정해야 합니다. 키프레임은 애니메이션 시퀀스 중 특정 지점에 요소가 표시되는 방식을 정의합니다.
3. 브라우저 호환성: 사용 중인 브라우저가 CSS3 애니메이션을 지원하는지 확인하세요. Chrome을 포함한 대부분의 최신 브라우저는 이 기능을 지원합니다.

해결책: 키프레임 추가

코드에서 애니메이션 속성을 정의했지만 애니메이션 키프레임은 정의하지 않았습니다. 이 문제를 해결하려면 다음 키프레임 규칙을 추가하세요.

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

이 키프레임 규칙은 애니메이션 중에 요소가 0도에서 360도까지 회전해야 함을 지정합니다.

데모

키프레임 규칙이 추가되면 이제 코드는 다음과 같아야 합니다.

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

<code class="css">div {
    ... (same animation properties as before)
}

@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}</code>

이 코드는 div 요소에 대한 회전 애니메이션을 생성해야 합니다.

위 내용은 내 CSS3 스핀 애니메이션이 Chrome에서 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!