使用 Javascript 的 CSS3 转换

CSS3 Transformations using Javascript

本文关键字：转换 CSS3 Javascript 使用      更新时间：2023-09-26

我想使用带有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>');

概念验证（在页面加载中增加了 5 秒的相当可怕的样式）

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

更新：

Seing Katti的评论打算每隔几秒钟更改一次样式值 - 我宁愿你不要。您完全可以只生成固定的动画子集;imo 蝉原理将非常适用于这种情况 - 只需在阅读文章时考虑运动而不是图形模式。除非应用于非常大量的小粒子（这可能会杀死浏览器），否则真正的随机动画看起来并不逼真 - 这意味着动画预渲染的精灵将是要走的路。

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

教程

相关文章：