내 CSS3 이미지 회전 애니메이션이 작동하지 않는 이유는 무엇입니까?

CSS3 회전 애니메이션: 이미지 회전에 대한 CSS 문제 해결

CSS3 애니메이션은 역동적이고 시각적으로 매력적인 웹 경험을 만들기 위한 강력한 도구를 제공합니다. 일반적인 사용 사례 중 하나는 변환 속성을 사용하여 이미지나 요소를 회전하는 것입니다. 그러나 CSS가 올바르지 않으면 애니메이션이 올바르게 작동하지 않을 수 있습니다.

이미지가 360도 회전하지만 정적으로 유지되는 문제의 예가 제공됩니다. 문제는 제공된 CSS에 있습니다.

올바른 CSS

문제를 해결하기 위해 다음과 같이 수정된 CSS가 생성되었습니다.

< pre>.image {

position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;

}
@-moz-keyframes 스핀 {

100% { -moz-transform: rotate(360deg); } 

}
@-webkit-keyframes spin {

100% { -webkit-transform: rotate(360deg); } 

}
@keyframes spin {

100% { 
    -webkit-transform: rotate(360deg); 
    transform:rotate(360deg); 
} 

}< /pre>

주요 차이점은 여백 속성과 제거에 있습니다. 애니메이션 키프레임의 from 및 to 상태.

설명

여백 속성은 이미지를 페이지 중앙에 올바르게 배치합니다. 회전을 적용하는 변환 속성은 100% 상태를 사용하여 애니메이션의 모든 프레임에 대해 설정됩니다. 시작 및 끝 상태를 제거하면 애니메이션이 더 부드러워지고 회전 시작과 끝에서 갑작스러운 전환이 방지됩니다.

이러한 변경 사항이 구현되면 이제 애니메이션 이미지가 부드럽고 연속적으로 회전해야 합니다.

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