相关疑难解决方法(0)

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

我有一段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;
}
Run Code Online (Sandbox Code Playgroud)

上面的代码工作正常,但是当我尝试将javascript中的变量粘贴到rotate(variable);我无法使其工作时.我是新手,所以我90%肯定我只是没有正确的变量语法(严重的是我很难记住,如果有东西需要括号,引号,波浪等等,我已经尝试了所有我能想到的) .

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

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

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

@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(-10deg);}
    100% {-webkit-transform: rotate(10deg);}
}
Run Code Online (Sandbox Code Playgroud)

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

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

谢谢.

javascript css variables webkit keyframe

34
推荐指数
3
解决办法
4万
查看次数

以编程方式更改动画规则中的webkit转换值

我有这个样式表:

        @-webkit-keyframes run {
            0% {
                -webkit-transform: translate3d(0px, 0px, 0px);
            }            
            100% {
                -webkit-transform: translate3d(0px, 1620px, 0px);
            }
        }
Run Code Online (Sandbox Code Playgroud)

现在,我想根据一些参数修改1620px的值.像这样:

        @-webkit-keyframes run {
            0% {
                -webkit-transform: translate3d(0px, 0px, 0px);
            }            
            100% {
                -webkit-transform: translate3d(0px, height*i, 0px);
            }
        }
Run Code Online (Sandbox Code Playgroud)

我宁愿能够使用JavaScript和jQuery,虽然纯CSS解决方案可以.

这适用于在其移动Apple Safari浏览器中运行的iPhone游戏.

javascript css safari webkit mobile-safari

23
推荐指数
2
解决办法
2万
查看次数

标签 统计

css ×2

javascript ×2

webkit ×2

keyframe ×1

mobile-safari ×1

safari ×1

variables ×1