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

Gleichzeitiges Auslösen mehrerer CSS-Animationen

Beim Umgang mit CSS-Animationen ist es oft wünschenswert, mehrere Animationen gleichzeitig auszuführen. Dies kann durch die Nutzung der Animationseigenschaft erreicht werden.

Codestruktur

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.

Demo-Implementierung

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.

Live-Demonstration

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!