javascript - 使用Javascript进行CSS3转换

我想使用带有JavaScript的关键帧来处理css3转换。
这是一个我从未在任何地方都满意的答案的问题。
如果例子是

@-webkit-keyframes move{
    from{
        -webkit-transform:translate(0px,0px);
    }
    to{
        -webkit-transform:translate(0px,-100px);
    }
}

如何使用javascript动态赋予这些值。

最佳答案

该场景有些复杂，因为即使在CSS中也无法显式分配未声明的动画。也就是说，在您的示例中，您要声明“移动”动画。

话虽如此，您可以在运行时生成样式表-生成以下CSS规则相当简单：

@-webkit-keyframes moveA{/*keyframes*/}
#smokeA {-webkit-animation: moveA 5s infinite; }
@-webkit-keyframes moveB{/*keyframes*/}
#smokeB {-webkit-animation: moveB 5s infinite; }
...

然后可以将其附加到文档的head中，如下所示：

$('head').append('<style type="text/css">/*css rules here*/</style>');

Proof of concept（在页面加载5秒后添加了非常恐怖的样式）

注意：我注意到启用GPU加速后，FPS计数器会在我的Chrome上触发。这使我推测，与jQuery动画相比，这实际上可能是一种性能更好的方法。

更新：

Seing Katti的评论打算每隔几秒钟更改一次样式值-我希望您不要。您只需要生成固定的动画子集就可以了。 imo Cicada Principle在这种情况下将非常适用-在阅读本文时，只考虑移动而不是图形化模式。除非将真正的随机动画应用于大量的小粒子（这可能会杀死浏览器），否则它看起来是不现实的-这意味着对预渲染的精灵进行动画处理是可行的。