Wie kann ich CSS-Animationsparameter dynamisch anpassen?

Anpassen von CSS-Animationen mit parametrisierten Werten

Die bereitgestellte CSS-Animation legt die Dauer und Parameter für ein von links hineingleitendes Element fest. Was aber, wenn Sie diese Parameter je nach Kontext dynamisch anpassen möchten?

Eine Möglichkeit, dies zu erreichen, ist die Verwendung von CSS-Variablen. So geht's:

p {
animation-duration: 3s;
animation-name: slidein;
}

@keyframes slidein {
from {

margin-left: var(--m, 0%);
width: var(--w, 100%);

}

zu {

margin-left: 0%;
width: 100%;

}
}

Jetzt können Sie mithilfe von JavaScript die Werte für --m (Rand links) und --w (Breite) wie folgt festlegen:

document.querySelector('.p2').style.setProperty('--m', '100%');
document.querySelector('.p2').style.setProperty('--w', '300%');

Damit können Sie die Animationsparameter für steuern bestimmte Elemente dynamisch.

Betrachten Sie als Beispiel zwei Absätze mit den Klassennamen „p1“ und "p2":

.p1,.p2 {
animation-duration: 3s;
animation-name: slidein;
}

Dies wird nicht animieren, da die Animation den für die Variable festgelegten Standardwert verwendet

Dies wird animiert, weil wir die CSS-Variable mit JS geändert haben

Der erste Absatz wird nicht animiert, weil er die Standardwerte für --m und --w verwendet. Der zweite Absatz wird jedoch gemäß den in JavaScript festgelegten benutzerdefinierten Parametern animiert.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Animationsparameter dynamisch anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!