如何完全从JavaScript定义CSS动画?

我希望将CSS动画应用于完全由JavaScript函数生成的HTML项。我的代码涉及通过可定制的设置和功能定义动画的每个部分,这就是为什么这是必要的。我可以通过在JS中执行以下操作来定义动画本身:

element.style.animation = "sprite_anim 1.0s steps(4) infinite"

问题在于关键帧:它们通常需要是CSS文件中的静态定义。

@keyframes sprite_anim {
    from {
        background-position: 0px 0px;
    }
    to {
        background-position: -128px 0px;
    }
}

在这种情况下,我希望代码也动态定义这4个偏移值;每个图像都会设置一次,所以可以为我将使用的每个组合生成一次性动画,但值本身是通过脚本计算的。从代码中定义关键帧的侵入性最小、浏览器兼容性最好、最短的方法是什么?