Eu tenho um pedaço de código JS para gerar números aleatórios e enviá-los como variáveis ​​a serem usadas aqui no lugar dos valores de rotação

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

O código acima funciona bem, no entanto, quando tento colocar as variáveis ​​do javascript emrotate(variable); Eu não consigo fazer isso funcionar. Eu sou novo para isso, então eu tenho 90% de certeza que eu não tenho a sintaxe certa para a variável (sério eu sou terrível em lembrar se algo precisa de parênteses, citações, squigglys etc e eu tentei tudo o que posso pensar) .

Ou pode ser porque a variável é local para a função e o CSS não pode ler isso.

Então, basicamente eu só preciso de algum tipo estranho para me dizer a sintaxe correta e como obter CSS para ler a variável, se possível.

Caso contrário, parece que vou precisar da função para criar a totalidade de:

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

... o que pode ser um pouco confuso, já que a variável aleatória provavelmente será aplicada a vários elementos css.

Ah, e atualmente a variável é formatada para incluir odeg após o número, então esse não é o problema. De fato, por uma questão de facilidade, suponha que estou usando var dogValue = "20deg"; e esqueça o elemento aleatório.

Obrigado.