Wie kann ich mehrere CSS-Animationen gleichzeitig mit unterschiedlichen Geschwindigkeiten auslösen?

Gleichzeitiges Auslösen mehrerer CSS-Animationen mit unterschiedlichen Geschwindigkeiten

In Ihrem Beispiel wollten Sie gleichzeitig zwei CSS-Animationen mit Rotations- und Skalierungseffekten auslösen. Es ist jedoch ein Problem aufgetreten, bei dem nur die letztgenannte Animation abgespielt wurde.

Um dieses Problem zu beheben, besteht die richtige Lösung darin, Kommas zu verwenden, um mehrere Animationen innerhalb einer einzelnen Animationseigenschaft anzugeben. Jede Animation kann ihre eigenen Eigenschaften haben, einschließlich Dauer und Geschwindigkeit.

Modifiziertes Beispiel:

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

Erklärung:

In diesem modifizierten Code definieren wir die Animationseigenschaft so, dass sie sowohl die „Spin“- als auch die „Scale“-Animationen enthält, getrennt durch ein Komma. Die Drehanimation schließt ihren Zyklus alle 2 Sekunden ab, während die Skalierungsanimation ihren Zyklus alle 4 Sekunden abschließt.

Durch die Integration mehrerer Animationen mit unterschiedlichen Geschwindigkeiten in eine einzige Animationseigenschaft können Sie den gewünschten Effekt erzielen Die Rotations- und Wachstumsanimationen werden gleichzeitig in ihrer jeweiligen Geschwindigkeit abgespielt.

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