Establecer valores de fotogramas clave de Webkit utilizando la variable Javascript

Tengo un fragmento de código JS para generar números aleatorios y generarlos como variables para usar aquí en lugar de los valores de rotación

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

El código anterior funciona bien, sin embargo, cuando intento pegar las variables del javascript enrotate(variable); No puedo hacer que funcione. Soy nuevo en esto, así que estoy 90% seguro de que no tengo la sintaxis adecuada para la variable (en serio, soy terrible para recordar si algo necesita corchetes, comillas, garabatos, etc. y he intentado todo lo que puedo pensar) .

O podría ser porque la variable es local a la función y CSS no puede leer eso.

Básicamente, solo necesito un extraño desconocido para decirme la sintaxis correcta y cómo obtener CSS para leer la variable si es posible.

De lo contrario, parece que necesitaré la función para crear la totalidad de:

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

... lo que podría ser un poco desordenado ya que la variable aleatoria probablemente se aplicará a múltiples elementos css.

Ah, y actualmente la variable está formateada para incluir ladeg Después del número para que no sea el problema. De hecho, por razones de facilidad, supongamos que estoy usando var dogValue = "20deg"; Y olvida el elemento aleatorio.

Gracias.

Respuestas a la pregunta(3)

Su respuesta a la pregunta