Festlegen von Webkit-Keyframe-Werten mithilfe der Javascript-Variablen

Ich habe ein Stück JS-Code, um Zufallszahlen zu generieren und sie als Variablen auszugeben, die hier anstelle der Rotationswerte verwendet werden

<code>@-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;
}
</code>

Der obige Code funktioniert jedoch gut, wenn ich versuche, die Variablen aus dem Javascript in zu steckenrotate(variable); Ich kann es nicht zum Laufen bringen. Ich bin neu in diesem Bereich und bin mir zu 90% sicher, dass ich nicht die richtige Syntax für die Variable habe (im Ernst, ich kann mich nicht erinnern, ob etwas Klammern, Anführungszeichen, Schnörkel usw. benötigt, und ich habe alles versucht, was mir einfällt). .

Oder weil die Variable lokal für die Funktion ist und CSS das nicht lesen kann.

Im Grunde brauche ich nur einen gewissen Fremden, der mir die korrekte Syntax erklärt und wie man CSS dazu bringt, die Variable zu lesen, wenn es möglich ist.

Ansonsten brauche ich die Funktion, um Folgendes zu erstellen:

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

... was etwas chaotisch sein kann, da die Zufallsvariable wahrscheinlich auf mehrere CSS-Elemente angewendet wird.

Oh, und momentan ist die Variable so formatiert, dass sie die enthältdeg nach der nummer ist das also nicht das problem. Der Einfachheit halber gehe ich davon aus, dass ich var dogValue = "20deg" verwende. und vergiss das zufällige Element.

Vielen Dank.

Antworten auf die Frage(3)

Ihre Antwort auf die Frage