更新

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秒）

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

更新

Seing Katti的评论意图每隔几秒就改变一次样式值 - 我宁愿你不这样做。你很可能只生成一个固定的动画子集; imo Cicada Principle在这种情况下非常适用 - 在阅读文章时只考虑运动而不是图形模式。除非应用于极大量的小粒子（这可能会杀死浏览器），否则真正随机的动画看起来并不真实 - 这意味着动画预渲染的精灵将是最佳选择。

Answer 2

我猜你需要使用javascript动画一些元素..就像增加height | width一样..这应该是一个好的起点..

Tutorial

使用Javascript进行CSS3转换

2 个答案:

更新