1

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

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

如何使用 javascript 动态地给出这些翻译值。

4

2 回答 2

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>');

概念证明（在页面加载 5 秒后添加了相当可怕的样式）

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

更新：

看到 Katti 的评论打算每隔几秒钟更改一次样式值- 我宁愿你不要。只生成固定的动画子集就可以很好地摆脱困境；imo蝉原理在这种情况下非常适用——阅读文章时只考虑运动而不是图形模式。除非应用于大量的小粒子（这可能会杀死浏览器），否则真正随机的动画看起来并不真实——这意味着动画预渲染精灵将是可行的方法。

于 2012-05-27T22:47:22.177 回答
-1

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

教程

于 2012-05-27T21:59:10.233 回答