Warum funktioniert meine CSS3-Bildrotationsanimation nicht?

CSS3-Rotationsanimation: Beheben von CSS-Problemen bei der Bildrotation

CSS3-Animationen bieten ein leistungsstarkes Werkzeug zum Erstellen dynamischer und visuell ansprechender Weberlebnisse. Ein häufiger Anwendungsfall ist das Drehen eines Bildes oder Elements mithilfe der Transformationseigenschaft. Falsches CSS kann jedoch verhindern, dass die Animation ordnungsgemäß funktioniert.

Ein Beispiel für ein solches Problem wird gegeben, bei dem ein Bild um 360 Grad gedreht werden soll, aber statisch bleibt. Das Problem liegt im bereitgestellten CSS.

Das richtige CSS

Um das Problem zu beheben, wurde das folgende überarbeitete CSS erstellt:

< 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 spin {

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

}
@-webkit-keyframes spin {

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

}
@keyframes spin {

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

}< /pre>

Der Hauptunterschied liegt in der Randeigenschaft und der Entfernung der Von- und Bis-Zustände aus der Animation Keyframes.

Erklärung

Die Randeigenschaft positioniert das Bild korrekt in der Mitte der Seite. Die Transformationseigenschaft, die die Drehung anwendet, wird für alle Frames in der Animation mit dem Status 100 % festgelegt. Durch das Entfernen der Von- und Bis-Zustände wird die Animation flüssiger und ein abrupter Übergang am Anfang und Ende der Drehung wird vermieden.

Nachdem diese Änderungen implementiert wurden, sollte sich das animierte Bild nun reibungslos und kontinuierlich drehen.

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