Правильный подход — менять в JS только классы. Менять правила с помощью атрибута style нужно в крайнем случае. А в случае с animation это вообще невозможно — анимация, как и любое
@rule, описывается отдельно от элементов.
Если нужно создать много правил, основываясь на данных, которые появятся только в скрипте, используем insertRule у объекта из коллекции document.styleSheets. В этих правилах вы сформируете имена animation и привяжете их к классам.
Вот примерно так
codepen.io/cleric/pen/FqIaD
Причём тут я пошёл на поводу простоты и вместо классов оперирую атрибутом style. Но в боевых условиях я бы подумал 10 раз — могут меняться и другие параметры (продолжительность и прочее).