时间戳

首页 > 解决方案 > 如何完全从 JavaScript 定义 CSS 动画？

javascript - 如何完全从 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 个偏移值；它们将为每个图像设置一次，因此可以为我将使用的每个组合生成一次性动画，但值本身是通过脚本计算的。从代码中定义我的关键帧的最不干扰、最兼容浏览器和最短的方法是什么？

标签： javascripthtmlcss

解决方案

如果您的样式表中只有一组关键帧，定义如下：

@keyframes sprite_anim {
    from {
        background-position: var(--fromx) var(--fromy);
    }
    to {
        background-position: var(--tox) var(--toy);
    }
}

element.style.setProperty("--tox", valueforx)您可以使用等为 JS 中的每个图像设置这些变量。

推荐阅读