CSS animations on the fly generation with JavaScript

css_animations.js

// We are creating a new style tag
let newStyleSheet = document.createElement("style");

// Appending the style tag to the head.
document.head.appendChild(newStyleSheet);

// Writing to the style sheet some css rules including keyframes and the animation class
newStyleSheet.appendChild(document.createTextNode(`
@keyframes my-fun-keyframes {
    /* My keyframes for the animation I want to create */
}

.animate {
    animation: my-fun-keyframes 1s infinite;
}
`));

// el is the element we want to animate
el.classList.add("animate");

// Good! now el will animate according to the animation we created above!