相关疑难解决方法(0)

我有一段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"; 并忘记随机元素.

谢谢.

我有一个案例,我需要一个元素出现一秒然后消失,我不能使用javascript,所以我试图使它与CSS一起工作.

这是一个例子:

@-webkit-keyframes slide-one-pager {
    0% { left: 0; }
    50% { left: 100px; }
    100% { left: 0; }
}

所以在这个例子中,属性将逐渐从0过渡到100然后回到0.但是,我需要摆脱那个过渡,所以属性保持在0并且一旦达到50%就达到100.如果我说左:0,它不起作用; 为49%,因为仍有转型.

另一个例子,与我原来的问题略有不同,但如果我找到一个解决方案,它也会这样做:

@-webkit-keyframes slide-one-pager {
    0% { display: none; }
    50% { display: block; }
        75% { display: block; }
    100% { display: none; }
}

在这里,我想展示一段时间的元素.不,使用不透明度不是一个选项,因为元素仍然存在且仍然可以点击,我需要访问下面的元素.不幸的是,"显示"属性似乎不接受动画.如果有人能想到一个解决方案如何显示和隐藏带动画的元素(没有过渡!)我将非常感激.

有任何想法吗？

我有一个CSS关键帧动画，它本身非常普通。但是，我希望能够强制动画处于特定帧。 类似的东西anim.setProgress(0.13)，它将动画设置为13％。 我怎样才能做到这一点？

请注意，我不只是想在任意点开始动画。我希望能够中断它并说“回到32％”之类的值，而不管动画沿多远。