Wie kann ich WebKit-Keyframe-Animationsrotationswerte mithilfe von JavaScript dynamisch festlegen?

Dynamische Keyframe-Werte: Verwendung von JavaScript-Variablen in CSS

Frage:

Wie können Sie Legen Sie die Rotationswerte einer Webkit-Keyframe-Animation mithilfe von JavaScript dynamisch fest Variablen?

Antwort:

In CSS können Sie JavaScript-Variablen nicht direkt in Keyframe-Animationen einfügen. Um dies zu erreichen, müssen Sie die CSS-Regeln über JavaScript erstellen und in das CSS-Objektmodell (CSSOM) einfügen.

Betrachten Sie den folgenden Beispielcode:

@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(-10deg);}
    100% {-webkit-transform: rotate(10deg);}
}

#dog{
/*irrelevant settings*/
-webkit-animation: rotate 5s infinite alternate ease-in-out;
}

Zum dynamischen Festlegen der Rotationswerte können Sie eine JavaScript-Funktion schreiben:

// Assume var dogValue = "20deg";
var styleElement = document.createElement('style');
styleElement.type = 'text/css';
var keyframesRule = `@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(-${dogValue});}
    100% {-webkit-transform: rotate(${dogValue});}
}`;
styleElement.appendChild(document.createTextNode(keyframesRule));
document.head.appendChild(styleElement);

Dieser Code erstellt einen neuen

Mit diesem Ansatz können Sie Keyframe-Werte mithilfe von JavaScript-Variablen dynamisch festlegen und so sicherstellen, dass die CSS-Regeln bei Bedarf aktualisiert werden.

Das obige ist der detaillierte Inhalt vonWie kann ich WebKit-Keyframe-Animationsrotationswerte mithilfe von JavaScript dynamisch festlegen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!