Warum funktioniert meine CSS3-Rotationsanimation nicht?

CSS3-Rotationsanimation

In diesem Beitrag beheben wir ein Problem mit einer CSS3-Rotationsanimation, die nicht wie erwartet funktioniert. Der Benutzer möchte, dass sich ein Bild auf unbestimmte Zeit um 360 Grad dreht, aber das Bild bleibt stehen.

Untersuchen wir das bereitgestellte CSS, um die Ursache zu ermitteln:

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

Nachdem wir das CSS überprüft haben, Wir haben einige Bereiche identifiziert, in denen Anpassungen erforderlich sind, damit die Animation funktioniert richtig:

• Float: Die Eigenschaft float: left ist nicht erforderlich, damit die Animation funktioniert. Entfernen Sie es.
• Position: Die Position: absolute Eigenschaft führt dazu, dass das Bild falsch positioniert wird. Ändern Sie die Position in „fixed“.
• Rand: Die Eigenschaften „margin-top“ und „margin-left“ werden zum Zentrieren des Bildes verwendet, sind für die Animation jedoch nicht erforderlich. Entfernen Sie sie.
• Animationseigenschaften: Die Animationseigenschaften scheinen korrekt zu sein, mit Ausnahme des Keyframes selbst. In der @keyframes-Regel fehlt ein From-Keyframe mit denselben Transformationseigenschaften wie der To-Keyframe.

Hier ist das korrigierte 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); 
    } 
}

Mit diesen Anpassungen das Bild sollte sich nun reibungslos um seine Mitte drehen.

Das obige ist der detaillierte Inhalt vonWarum funktioniert meine CSS3-Rotationsanimation nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!