Wie kann ich mehrere CSS-Animationen gleichzeitig mit unterschiedlichen Geschwindigkeiten abspielen?

Gleichzeitige Wiedergabe mehrerer CSS-Animationen mit unterschiedlichen Geschwindigkeiten

Der angegebene Code kann aufgrund falscher Syntax nicht mehrere CSS-Animationen gleichzeitig ausführen. Um ein Element mit mehreren Animationen zu animieren, sollte jede Animation separat innerhalb der Animationseigenschaft deklariert und durch Kommas getrennt werden.

Um den gewünschten Effekt des asynchronen Drehens und Skalierens eines Elements zu erzielen:

1. Deklarieren Sie die Animationseigenschaft:

   .image {
    animation: spin 2s linear infinite, scale 4s linear infinite;
   }

2. Definieren Sie die Spin-Animation für Drehung:

   @-webkit-keyframes spin { 
    100% { 
        transform: rotate(180deg);
    } 
   }

3. Definieren Sie die Skalierungsanimation für Wachstum:

   @-webkit-keyframes scale {
    100% {
        transform: scaleX(2) scaleY(2);
    }
   }

Der geänderte Code ermöglicht die gleichzeitige Wiedergabe beider Animationen. Erzielung des gewünschten Effekts durch Drehen und Wachsen des Elements mit unterschiedlichen Geschwindigkeiten.

Das obige ist der detaillierte Inhalt vonWie kann ich mehrere CSS-Animationen gleichzeitig mit unterschiedlichen Geschwindigkeiten abspielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!