javascript - 使用 Javascript 的 CSS3 转换

Question

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

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

我怎样才能使用 javascript 动态地给出这些翻译值。

Answer 1

这个场景有点复杂，你不能显式地分配一个未声明的动画即使在 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 加速后，我的 Chrome 会触发 FPS 计数器。这让我推测，与 jQuery 动画相比，这实际上可能是一种性能更好的方法。

更新:

看到 Katti 的评论，他打算每隔几秒更改一次样式值 - 我希望你不要这样做。您完全可以只生成固定的动画子集。我的Cicada Principle在这种情况下将非常适用——阅读本文时只需考虑运动而不是图形模式。真正的随机动画看起来不真实，除非应用于极大量的小粒子(这可能会杀死浏览器)——这意味着动画预渲染 Sprite 将是可行的方法。