使用 Javascript 变量设置 Webkit 关键帧值

Question

我有一段 JS 代码来生成随机数并将它们作为变量输出，在这里代替旋转值使用

@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(-10deg);}
    100% {-webkit-transform: rotate(10deg);}
}

#dog{
/*irrelevant settings*/
-webkit-animation: rotate 5s infinite alternate ease-in-out;
}

但是，当我尝试将 javascript 中的变量粘贴到rotate(variable);时，上面的代码工作正常rotate(variable); 我无法让它工作。 我是新手，所以我 90% 确定我只是没有为变量找到正确的语法（说真的，我很难记住是否需要括号、引号、波浪线等，我已经尝试了所有我能想到的） .

或者可能是因为该变量是函数的局部变量，而 CSS 无法读取该变量。

所以基本上我只需要一些陌生人来告诉我正确的语法以及如果可能的话如何让 CSS 读取变量。

否则看起来我将需要该函数来创建整个：

@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(-10deg);}
    100% {-webkit-transform: rotate(10deg);}
}

...这可能有点乱，因为随机变量可能会应用于多个 css 元素。

哦，目前变量被格式化为在数字后包含deg ，所以这不是问题。 事实上，为了方便起见，假设我使用的是 var dogValue = "20deg"; 忘记随机元素。

谢谢。

Answer 1

好吧，不是你实际代码的样子，但你不能把 JavaScript 变量扔到 CSS 中，它不会识别它们。

相反，您需要通过 JavaScript 创建 CSS 规则并将它们插入到 CSSOM（CSS 对象模型）中。 这可以通过几种方式完成——您可以只创建一个关键帧动画并将其添加进来，也可以覆盖现有的动画。 为了这个问题，我将假设您想用不同的旋转值不断覆盖现有的关键帧动画。

我已经整理（并记录）了一个 JSFiddle 供您查看： http : //jsfiddle.net/russelluresti/RHhBz/2/

它开始运行 -10 -> 10 度旋转动画，但随后您可以单击按钮使其在随机值之间（-360 度和 360 度之间）执行旋转。

这个例子主要是从 Simon Hausmann 的早期实验中拼凑出来的。 您可以在此处查看源： http : //www.gitorious.org/~simon/qtwebkit/simons-clone/blobs/ceaa977f87947290fa2d063861f90c820417827f/LayoutTests/animations/change-keyframes.html （只要该链接有效在维护网址方面非常糟糕）。

我还从这里获取了 randomFromTo JavaScript 函数代码： http : //www.admixweb.com/2010/08/24/javascript-tip-get-a-random-number-between-two-integers/

我已经将文档添加到我从他那里获取的 Simon Hausmann 脚本的部分中（尽管我对它们做了一些修改）。 我还使用 jQuery 来将点击事件附加到我的按钮上——所有其他脚本都是用原生 JavaScript 编写的。

我已经在 Chrome 18 和 Safari 5.1 上测试过这个，它似乎在两种浏览器中都能正常工作。

希望这可以帮助。

Answer 2

在chrome 49以后和Firefox 48以后，您可以利用新的 Javascript API element.animate()来推送关键帧动画。

请注意，此 API 是实验性的，除上述内容外，不能跨浏览器工作。

可以利用添加class或注入关键帧等过时的解决方案来实现向后兼容性。 无法立即提供相同的垫片。

删除 MDN 示例

document.getElementById("tunnel").animate([
  // keyframes
  { transform: 'translateY(0px)' }, 
  { transform: 'translateY(-300px)' }
], { 
  // timing options
  duration: 1000,
  iterations: Infinity
});

参考：

• caniuse.com/#feat=web-animation
• MDN 文档

Answer 3

对于在 2017 年寻找此答案的任何人，以下是RussellUresti 答案中的变化。

在他的例子中，这将不再起作用：

keyframes.insertRule("0% { -webkit-transform: rotate(" + randomFromTo(-360,360) + "deg); }");
keyframes.insertRule("100% { -webkit-transform: rotate(" + randomFromTo(-360,360) + "deg); }");

这是因为 .insertRule() 是一个非标准名称。 现在是 .appendRule()，所以 RusselsUresti 的代码现在是：

keyframes.appendRule("0% { -webkit-transform: rotate(" + randomFromTo(-360,360) + "deg); }");
keyframes.appendRule("100% { -webkit-transform: rotate(" + randomFromTo(-360,360) + "deg); }");

^{（只需将insertRule替换为insertRule appendRule 。）}

可以在此处找到有关 CSSKeyframeRule 的更多信息