I am looking to implement CSS animation on HTML elements that are generated entirely through a JavaScript function. The approach I am taking involves customizing settings and functions for each part of the animation, which is why this method is necessary. Defining the animation itself in JavaScript is not an issue:
element.style.animation = "sprite_anim 1.0s steps(4) infinite"
The challenge lies in defining the keyframes, as they typically require a static definition in a CSS file.
@keyframes sprite_anim {
from {
background-position: 0px 0px;
}
to {
background-position: -128px 0px;
}
}
In this scenario, I need the code to dynamically generate those 4 offset values as well; They will be set once per image, so it is acceptable to create a one-time animation for each combination I intend to use, but the values themselves are determined by a script. What is the most unobtrusive, cross-browser compatible, and concise way to define my keyframes within the code?