Ustawianie wartości klatek kluczowych Webkit przy użyciu zmiennej JavaScript

Mam fragment kodu JS do generowania liczb losowych i wyprowadzania ich jako zmiennych do wykorzystania tutaj w miejsce wartości rotacji

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

Powyższy kod działa jednak dobrze, gdy próbuję włożyć zmienne z javascript dorotate(variable); Nie mogę go uruchomić. Jestem nowy w tej kwestii, więc mam 90% pewności, że po prostu nie mam poprawnej składni dla zmiennej (poważnie jestem straszny, gdy pamiętam, czy coś potrzebuje nawiasów, cudzysłowów, squigglys itp. I próbowałem wszystkiego, o czym mogę myśleć) .

Może to być spowodowane tym, że zmienna jest lokalna względem funkcji, a CSS nie może jej odczytać.

Tak więc po prostu potrzebuję jakiegoś nieznajomego, aby powiedzieć mi poprawną składnię i jak uzyskać CSS do odczytania zmiennej, jeśli to możliwe.

W przeciwnym razie wygląda na to, że będę potrzebować funkcji do utworzenia całości:

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

... co może być trochę chaotyczne, ponieważ zmienna losowa będzie prawdopodobnie stosowana do wielu elementów css.

Aha i obecnie zmienna jest sformatowana tak, aby zawieraładeg po numerze, więc to nie jest problem. W rzeczywistości dla ułatwienia załóżmy, że używam var dogValue = "20deg"; i zapomnij o losowym elemencie.

Dzięki.

questionAnswers(3)

yourAnswerToTheQuestion