使用Javascriptvariables设置Webkit关键帧值
我有一段JS代码来生成随机数字，并将其作为variables输出，以代替旋转值
@-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的variables粘贴到rotate(variable); 我无法得到它的工作。 我是新来的，所以我90％肯定我只是没有variables的语法正确（严重的是，我记得是否需要括号，引号，波浪曲等等，我已经尝试了所有我能想到的很糟糕） 。
或者这可能是因为该variables是本地的function和CSS不能读取。
所以基本上我只是需要一些陌生人告诉我正确的语法，如果可能的话如何让CSS读取variables。
否则，看起来我将需要该函数来创build完整的：
@-webkit-keyframes rotate { 0% {-webkit-transform: rotate(-10deg);} 100% {-webkit-transform: rotate(10deg);} }
…这可能有点混乱，因为随机variables可能会应用到多个CSS元素。
哦，目前variables格式化包括数字后面的deg ，这不是问题。 实际上，为了方便起见，假设我正在使用var dogValue =“20deg”; 并忘记随机元素。
谢谢。
好吧，不是你的实际代码看起来像，但你不能扔JavaScript的variables到CSS，它不会识别它们。
相反，您需要通过JavaScript创buildCSS规则并将其插入到CSSOM（CSS对象模型）中。 这可以通过几种方法完成 – 您可以创build一个关键帧animation并添加它，也可以覆盖现有的animation。 为了这个问题的缘故，我假设你想要不断改写具有不同旋转值的现有关键帧animation。
我已经放在一起（并logging）一个JSFiddle让你看看： http : //jsfiddle.net/russelluresti/RHhBz/2/
它开始运行一个-10 – > 10度的旋转animation，但是你可以点击button让它在随机值（-360到360度之间）之间旋转。
这个例子主要是由Simon Hausmann先前的实验所篡改的。 你可以看到这里的来源： http : //www.gitorious.org/~simon/qtwebkit/simons-clone/blobs/ceaa977f87947290fa2d063861f90c820417827f/LayoutTests/animations/change-keyframes.html （只要该链接的作品，gitorious是很糟糕的维护url）。
我也从这里采取了randomFromTo JavaScript函数代码： http : //www.admixweb.com/2010/08/24/javascript-tip-get-a-random-number-between-two-integers/
我已经把文档添加到Simon Hausmann脚本的部分内容中（尽pipe我稍微修改了它们）。 我也使用jQuery只是将点击事件附加到我的button – 所有其他脚本是用原生JavaScript编写的。
我已经testing了Chrome 18和Safari 5.1，并且在两个浏览器中都能正常工作。
希望这可以帮助。
在chrome 49以后的Firefox 48和Firefox 48以后，你可以利用新的Javascript API element.animate()来推动你的关键帧animation。
请注意，这个API是实验性的，除了前面提到的以外，不能跨浏览器工作。
像添加class或注入关键帧的date解决scheme可以用于向后兼容。 同样的垫片不能马上得到。
掀起了MDN的例子
document.getElementById("tunnel").animate([ // keyframes { transform: 'translateY(0px)' }, { transform: 'translateY(-300px)' } ], { // timing options duration: 1000, iterations: Infinity });
参考：
- caniuse.com/#feat=web-animation
- MDN文档
对于任何人在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); }");
更多关于CSSKeyframeRule的信息可以在这里find
