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);时，我无法使其工作。我是新手，所以我90％确定我没有得到变量的语法（严重的是我很难记住，如果某些东西需要括号，引号，波浪形等等，我已经尝试了所有我可以想到）。

或者可能是因为变量是函数的本地变量而CSS无法读取它。

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

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

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

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

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

感谢。

Answer 1

好吧，不是你的实际代码是什么样的，但你不能将JavaScript变量抛入CSS，它不会识别它们。

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

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

开始运行-10 - ＆gt; 10度旋转动画，但是你可以点击按钮让它在随机值之间（-360到360度之间）执行旋转。

这个例子主要是由Simon Hausmann先前的实验共同攻击的。你可以在这里看到来源：http://www.gitorious.org/~simon/qtwebkit/simons-clone/blobs/ceaa977f87947290fa2d063861f90c820417827f/LayoutTests/animations/change-keyframes.html（只要该链接有效，gitorious在维护网址时非常糟糕）。

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

我已经将Simon Hausmann脚本中的部分文档添加到了他的身上（虽然我稍微修改过它们）。我还使用jQuery将click事件附加到我的按钮 - 所有其他脚本都是用本机JavaScript编写的。

我已经针对Chrome 18和Safari 5.1对此进行了测试，它似乎在两种浏览器中都能正常运行。

希望这有帮助。

Answer 2

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

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

可以利用添加class或injecting keyframes等日期解决方案来实现向后兼容。没有立即使用垫片。

Yanked MDN示例

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

参阅：

Answer 3

对于那些在2017年寻找此答案的人来说，RussellUresti answer中的内容发生了变化。

在他的例子中，这已经不再适用了：

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); }");

More information on the CSSKeyframeRule can be found here

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

3 个答案: