9

我正在做一个很长的关键帧 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>
4

1 回答 1

9

您可以通过使用负动画延迟值来寻找特定的关键帧。

于 2012-10-28T23:36:04.103 回答