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

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 =“ 20deg”;
忘记随机元素。

谢谢。

Answer 1

好的，不是您的实际代码是什么样子，但是您不能将JavaScript变量放入CSS中，它无法识别它们。

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

它从运行-10-> 10度旋转动画开始，但是您可以单击按钮以使其在随机值之间（-360至360度之间）执行旋转。

我已将文档添加到我从他那里拿来的SimonHausmann脚本的各个部分中（尽管我对其进行了一些修改）。我还使用jQuery只是将click事件附加到我的按钮上-所有其他脚本都是用本机JavaScript编写的。

我已经针对Chrome 18和Safari 5.1测试了此功能，并且在两种浏览器中都可以正常工作。

希望这可以帮助。