使用 Javascript 变量设置 Webkit 关键帧值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10342494/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set Webkit Keyframes Values Using Javascript Variable
提问by Sasha
I have a piece of JS code to generate random numbers and output them as variables to be used here in place of the rotation values
我有一段 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;
}
The code above works fine however when I try to stick the variables from the javascript into rotate(variable);I cannot get it to work. I am new to this so I'm 90% sure I just haven't got the syntax right for the variable (seriously I am terrible at remembering if something needs brackets, quotes, squigglys etc and I have tried all I can think of).
上面的代码工作正常，但是当我尝试将 javascript 中的变量粘贴到rotate(variable);我无法让它工作时。我是新手，所以我 90% 确定我只是没有为变量找到正确的语法（说真的，我很难记住是否需要括号、引号、波浪线等，我已经尝试了所有我能想到的） .
Or it might be because the variable is local to the function and CSS cannot read that.
或者可能是因为该变量是函数的局部变量，而 CSS 无法读取该变量。
So basically I just need some kind stranger to tell me the correct syntax and how to get CSS to read the variable if possible.
所以基本上我只需要一些陌生人来告诉我正确的语法以及如果可能的话如何让 CSS 读取变量。
Otherwise it looks like I will need the function to create the entirety of:
否则看起来我将需要该函数来创建整个：
@-webkit-keyframes rotate {
0% {-webkit-transform: rotate(-10deg);}
100% {-webkit-transform: rotate(10deg);}
}
...which might be a bit messy since the random variable will likely be applied to multiple css elements.
...这可能有点乱，因为随机变量可能会应用于多个 css 元素。
Oh and currently the variable is formatted to include the degafter the number so that is not the issue. In fact, for the sake of ease just assume I am using var dogValue = "20deg"; and forget the random element.
哦，目前变量被格式化为包含deg数字之后，所以这不是问题。事实上，为了方便起见，假设我使用的是 var dogValue = "20deg"; 忘记随机元素。
Thanks.
谢谢。
回答by RussellUresti
Okay, not what your actual code looks like, but you can't throw JavaScript variables into CSS, it won't recognize them.
好吧，不是你实际代码的样子，但你不能把 JavaScript 变量扔到 CSS 中，它不会识别它们。
Instead, you need to create the CSS rules through JavaScript and insert them into the CSSOM (CSS Object Model). This can be done a few ways -- you can either just create a keyframe animation and add it in, or you can overwrite an existing animation. For this sake of this question, I'm going to assume you want to continually overwrite an existing keyframe animation with different rotation values.
相反，您需要通过 JavaScript 创建 CSS 规则并将它们插入到 CSSOM（CSS 对象模型）中。这可以通过几种方式完成——您可以只创建一个关键帧动画并将其添加进来，也可以覆盖现有的动画。为了这个问题，我将假设您想用不同的旋转值不断覆盖现有的关键帧动画。
I've put together (and documented) a JSFiddle for you to take a look at: http://jsfiddle.net/russelluresti/RHhBz/2/
我已经整理（并记录）了一个 JSFiddle 供您查看：http: //jsfiddle.net/russelluresti/RHhBz/2/
It starts off running a -10 -> 10 degree rotation animation, but then you can click the button to have it execute a rotation between random values (between -360 and 360 degrees).
它开始运行 -10 -> 10 度旋转动画，但随后您可以单击按钮使其在随机值之间（-360 度和 360 度之间）执行旋转。
This example was hacked together primarily from earlier experimentation done by Simon Hausmann. You can see the source here: http://www.gitorious.org/~simon/qtwebkit/simons-clone/blobs/ceaa977f87947290fa2d063861f90c820417827f/LayoutTests/animations/change-keyframes.html(for as long as that link works, gitorious is pretty bad at maintaining urls).
这个例子主要是从 Simon Hausmann 的早期实验中拼凑出来的。您可以在此处查看源：http: //www.gitorious.org/~simon/qtwebkit/simons-clone/blobs/ceaa977f87947290fa2d063861f90c820417827f/LayoutTests/animations/change-keyframes.html（只要该链接有效在维护网址方面非常糟糕）。
I've also taken the randomFromTo JavaScript function code from here: http://www.admixweb.com/2010/08/24/javascript-tip-get-a-random-number-between-two-integers/
我还从这里获取了 randomFromTo JavaScript 函数代码：http: //www.admixweb.com/2010/08/24/javascript-tip-get-a-random-number-between-two-integers/
I've added documentation to the parts of the Simon Hausmann script that I've taken from him (though I've slightly modified them). I've also used jQuery just to attach the click event to my button--all other script is written in native JavaScript.
我已经将文档添加到我从他那里获取的 Simon Hausmann 脚本的部分中（尽管我对它们做了一些修改）。我还使用 jQuery 来将点击事件附加到我的按钮上——所有其他脚本都是用原生 JavaScript 编写的。
I've tested this for Chrome 18 and Safari 5.1, and it seems to work fine in both browsers.
我已经在 Chrome 18 和 Safari 5.1 上测试过这个，它似乎在两种浏览器中都能正常工作。
Hope this helps.
希望这可以帮助。
回答by DDM
In chrome 49onwards and Firefox 48onwards you can leverage the new Javascript API element.animate()to push in your keyframe animations.
在chrome 49开始和Firefox 48以后，您可以利用新的JavaScript APIelement.animate()在关键帧动画来推动。
Please be informed that this API is experimental and doesn't work cross browser except for the aforementioned.
请注意，此 API 是实验性的，除上述内容外，不能跨浏览器工作。
Dated solutions like adding classor injecting keyframescould be leveraged for backward compatibility. A shim for the same was not available immediately.
可以利用添加class或注入关键帧等过时的解决方案来实现向后兼容性。无法立即提供相同的垫片。
Yanked the MDN example
删除 MDN 示例
document.getElementById("tunnel").animate([
// keyframes
{ transform: 'translateY(0px)' },
{ transform: 'translateY(-300px)' }
], {
// timing options
duration: 1000,
iterations: Infinity
});
refer:
参考：
回答by connoraworden
For anyone that is looking for this answer in 2017 here's what's changed in RussellUresti answer.
对于在 2017 年寻找此答案的任何人，以下是RussellUresti 答案中的变化。
In his example this won't work anymore:
在他的例子中，这将不再起作用：
keyframes.insertRule("0% { -webkit-transform: rotate(" + randomFromTo(-360,360) + "deg); }");
keyframes.insertRule("100% { -webkit-transform: rotate(" + randomFromTo(-360,360) + "deg); }");
This is due to .insertRule() being a non standard name. It is now .appendRule(), so RusselsUresti's code will now be:
这是因为 .insertRule() 是一个非标准名称。现在是 .appendRule()，所以 RusselsUresti 的代码现在是：
keyframes.appendRule("0% { -webkit-transform: rotate(" + randomFromTo(-360,360) + "deg); }");
keyframes.appendRule("100% { -webkit-transform: rotate(" + randomFromTo(-360,360) + "deg); }");
(Simply replace insertRulewith appendRule.)
（只需替换insertRule为appendRule。）
