Wie kann ich WebKit-Keyframe-Animationsrotationswerte mithilfe von JavaScript dynamisch festlegen?-CSS-Tutorial-php.cn

How to Dynamically Set WebKit Keyframe Animation Rotation Values Using JavaScript?

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;
}

Nach dem Login kopieren

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);

Nach dem Login kopieren

Dieser Code erstellt einen neuen