相关疑难解决方法(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"; 并忘记随机元素.

谢谢.

我正在使用CSS3动画,我希望能够移动到动画中的特定位置.例如,如果CSS看起来像这样(并假装我使用了所有正确的前缀):

@keyframes fade_in_out_anim {
  0% { opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}
#fade_in_out {
  animation: fade_in_out_anim 5s;
}

然后我希望能够停止动画,并将其移动到50%标记.我想理想的JavaScript看起来像这样:

var style = document.getElementById('fade_in_out').style;
style.animationPlayState = 'paused';

// Here comes the made up part...
style.animation.moveTo('50%'); // Or alternately...
style.animationPlayPosition = '50%';

有谁知道实现这一目标的方法(希望在Webkit中)？

假设我们有一个像这样的动画:http://jsfiddle.net/utterstep/JPDwC/

布局:

<div>back</div>
<div class="animating"></div>
<div>forward</div>

和相应的CSS:

@keyframes someanimation {
    0% {
        width: 100px;
    }
    50% {
        width: 200px;
    }
    100% {
        width: 100px;
    }
}

.animating {
    width: 200px;
    height: 200px;
    background-color: red;
    animation: someanimation 5s infinite;
}

当我向后或向前按时,我想进入下一个或上一个动画状态.可以有多个对象,我想同时切换它们的动画状态.

它是否可能通过CSS或CSS + JS,或者它可能更容易我只是在pure-JS中重写我的代码？(目前我不喜欢这个想法,因为我有很多动画属性,CSS让我更容易)

我正在做一个很长的关键帧css3动画,我希望能够寻找一个特定的关键帧 - 因此显示它 - 然后从那里播放动画.动画播放/暂停/反向运行很棒.

这是我到目前为止所拥有的.我可以开始/暂停,反转但没有寻求利用......

CSS

.myStyle{
    -webkit-animation-name: myStyle-keyframes;
    -webkit-animation-duration: 50000ms;
}
@-webkit-keyframes myStyle-keyframes {
    0% {-webkit-transform:translateX(0px) translateY(0px);}
    0.1% {-webkit-transform:translateX(1.86px) translateY(-0.62px);}
    ...
    100% {-webkit-transform:translateX(182px) translateY(-123px);}
}

JS

document.getElementById('ball').style.webkitAnimationPlayState='paused';

要么

document.getElementById('ball').style.webkitAnimationPlayState='running';

HTML

<svg id="ball" class="myStyle">[...]</svg>