Установка значений ключевых кадров Webkit с помощью переменной Javascript

У меня есть фрагмент кода JS для генерации случайных чисел и вывода их как переменные, которые будут использоваться здесь вместо значений вращения.

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

Приведенный выше код работает нормально, однако, когда я пытаюсь вставить переменные из javascript в rotate(variable);, я не могу заставить его работать. Я новичок в этом, поэтому я на 90% уверен, что у меня просто неправильный синтаксис для переменной (, серьезно, я ужасно запоминаю, если что-то нуждается в скобках, кавычках, волнистых линиях и т. д., и я пробовал все, что мог думать из ).

Или это может быть связано с тем, что переменная является локальной для функции, и CSS не может ее прочитать.

В общем, мне просто нужен какой-нибудь незнакомец, который объяснит мне правильный синтаксис и как заставить CSS читать переменную, если это возможно.

В противном случае, похоже, мне понадобится функция для создания всего:

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

... что может быть немного запутанным, поскольку случайная переменная, вероятно, будет применяться к нескольким элементам CSS.

Да, и в настоящее время переменная отформатирована так, чтобы включать degпосле числа, так что это не проблема. На самом деле, для простоты предположим, что я использую var dogValue = "20deg";и забудьте случайный элемент.

Спасибо.