40

我有一段 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% 确定我只是没有为变量找到正确的语法（说真的，我很难记住是否需要括号、引号、squigglys 等，我已经尝试了所有我能想到的） .

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

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

否则，看起来我需要该函数来创建全部：

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

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

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

谢谢。

4

3 回答 3

78

好吧，不是你的实际代码的样子，但你不能把 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（只要该链接有效，gitorious 就是非常不擅长维护网址）。

我还从这里获取了 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 进行了测试，它似乎在两种浏览器中都能正常工作。

希望这可以帮助。

于 2012-04-27T04:09:49.933 回答
19

chrome 49以后你可以利用Firefox 48新的 Javascript APIelement.animate()来推送你的关键帧动画。

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

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

抽出 MDN 示例

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

参考：

于 2016-08-25T09:22:10.053 回答
9

对于任何在 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); }");

（只需替换insertRule为appendRule。）

关于 CSSKeyframeRule 的更多信息可以在这里找到

于 2017-08-22T12:50:54.500 回答