Establecer Valores De Fotogramas Clave De Webkit Usando La Variable Javascript

Tengo un fragmento de código JS para generar números aleatorios y mostrarlos como variables que se utilizarán aquí en lugar de los valores de rotación

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

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

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

Así que básicamente solo necesito algún extraño que me diga la sintaxis correcta y cómo hacer que CSS lea la variable si es posible.

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

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

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

Oh y actualmente la variable es formateado para incluir el deg después del número por lo que no es el problema. De hecho, por el bien de la facilidad solo asumir que estoy usando var dogValue = "20deg"; y olvidar el elemento aleatorio.

Gracias.