내 CSS3 회전 애니메이션이 작동하지 않는 이유는 무엇입니까?-CSS 튜토리얼-php.cn

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

DDD

풀어 주다： 2024-12-08 20:23:14

원래의

848명이 탐색했습니다.

Why Isn't My CSS3 Rotate Animation Working?

CSS3 회전 애니메이션

이 게시물에서는 CSS3 회전 애니메이션이 예상대로 작동하지 않는 문제를 해결해 보겠습니다. 사용자는 이미지를 무한정 360도 회전시키려고 했지만 이미지는 그대로 남아 있습니다.

제공된 CSS를 살펴보고 원인을 파악해 보겠습니다.

.image {
    float: left;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin-top: -60px;
    margin-left: -60px;

    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    @-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); 
        }
    }
}

로그인 후 복사

CSS를 검토한 후, 애니메이션이 작동하려면 조정이 필요한 몇 가지 영역을 확인했습니다. 올바르게:

Float: 애니메이션이 작동하는 데에는 float: left 속성이 필요하지 않습니다. 제거하세요.
Position: position:absolute 속성으로 인해 이미지 위치가 잘못되었습니다. 위치: 고정으로 변경합니다.
여백: margin-top 및 margin-left 속성은 이미지를 중앙에 배치하는 데 사용되지만 애니메이션에는 필요하지 않습니다. 제거하세요.
애니메이션 속성: 키프레임 자체를 제외하고 애니메이션 속성이 올바른 것 같습니다. @keyframes 규칙에서는 to 키프레임과 동일한 변환 속성을 가진 from 키프레임이 누락되었습니다.

수정된 CSS는 다음과 같습니다.

.image {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;

    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}

로그인 후 복사

이러한 조정을 통해 이미지는 이제 중심을 중심으로 부드럽게 회전해야 합니다.

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