Beim Umgang mit CSS-Animationen ist es oft wünschenswert, mehrere Animationen gleichzeitig auszuführen. Dies kann durch die Nutzung der Animationseigenschaft erreicht werden.
Um zwei Animationen gleichzeitig auszulösen, kann man eine durch Kommas getrennte Liste in der Animationsdeklaration verwenden, wie unten gezeigt:
animation: rotate 1s, spin 3s;
In diesem Fall werden sowohl Dreh- als auch Drehanimationen auf das angegebene Element angewendet. Jede Animation behält ihre vordefinierten Eigenschaften, wie Dauer und Timing-Funktion.
Um dieses Konzept zu veranschaulichen, betrachten Sie den folgenden Beispielcode:
.image { position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; margin:-60px 0 0 -60px; -webkit-animation: spin 2s linear infinite, scale 4s linear infinite; } @-webkit-keyframes spin { 100% { transform: rotate(180deg); } } @-webkit-keyframes scale { 100% { transform: scaleX(2) scaleY(2); } }
Hier werden mehrere Animationen innerhalb der Eigenschaft -webkit-animation mithilfe von Kommas definiert. Die Rotationsanimation dreht das Bild alle 2 Sekunden, während die Skalierungsanimation seine Größe alle 4 Sekunden verdoppelt.
Um diesen Effekt in Aktion zu sehen, besuchen Sie die folgende URL: http://jsfiddle.net/Ugc5g/3392/
Das obige ist der detaillierte Inhalt vonWie kann ich mehrere CSS-Animationen gleichzeitig auslösen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!