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

我有一段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）中时，上面的代码工作得很好我无法让它工作。我是新来的，所以我90%确定我没有正确的变量语法（说真的，我很难记住是否需要括号、引号、曲线等，我已经尝试了我能想到的一切）

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

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

否则，我将需要该函数来创建以下全部内容：

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

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

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

谢谢。
好吧，这不是你的实际代码，但是你不能把JavaScript变量扔进CSS，它不会识别它们

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

我已经整理（并记录）了一个JSFIDLE供您查看：

它首先运行-10->10度旋转动画，然后您可以单击按钮让它在随机值（在-360度和360度之间）之间执行旋转

这个例子主要是由西蒙·豪斯曼（Simon Hausmann）的早期实验拼凑而成的。您可以在这里看到源代码：（只要该链接有效，gitorious在维护URL方面就非常糟糕）

我还从这里获取了randomFromTo JavaScript函数代码：

我已经将文档添加到Simon Hausmann脚本中我从他那里得到的部分（尽管我已经稍微修改了它们）。我还使用jQuery将单击事件附加到我的按钮上——所有其他脚本都是用本机JavaScript编写的

我已经在Chrome18和Safari5.1上测试过了，它似乎在两种浏览器中都能正常工作

希望这有帮助。
在
chrome49
和
firefox48
之后，您可以利用新的Javascript API
元素。animate（）
插入关键帧动画

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

过时的解决方案，如添加
类
，或可用于向后兼容。无法立即提供相同的垫片

猛拉MDN的例子

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

参考：




对于任何在2017年寻找答案的人来说，以下是他们的变化

在他的例子中，这将不再有效：

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
替换为
appendRule
）

从chrome 45开始，JSFIDLE不再工作。这里有一个解决方案。这就是为什么：在Chrome 65上，如果您将insertRule更改为appendRule，并将window.CSSRule.WEBKIT_KEYFRAMES_规则更改为window.CSSRule.KEYFRAMES_规则，小提琴就会工作。这应该是公认的答案。即使您希望元素从另一个位置开始并返回到原始位置，它也可以工作。我看到的其他解决方案CSSOM、CSS-DOM如果希望元素从其他位置开始，则无法工作。元素必须移动到该位置，而这不是像这样的解决方案。它甚至使用了最少的代码，就像css一样！！这是一个乱七八糟的沙箱，但它能工作。。。使用JS和动画侦听器在动画的每次迭代中为“100%”关键帧指定随机值。现在有一种使用CSS变量的更简单方法：