在css3动画中查找特定关键帧 [英] Seek to specific keyframe in css3 animation
本文介绍了在css3动画中查找特定关键帧的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在做一个漂亮的关键帧css3动画,我想能够寻找一个特定的关键帧,因此显示它,然后从那里播放动画。
动画播放/暂停/反转运行非常好。
I am doing a pretty long keyframe css3 animation and I would like to be able to seek to a specific keyframe - hence display it - and then play the animation from there. The animation play/pause/reverse run great.
这是我到目前为止。我可以开始/暂停,反向,但没有寻求可用...
Here is what I have so far. I can start/pause, reverse but no seek-to avail...
.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';
<svg id="ball" class="myStyle">[...]</svg>
推荐答案
动画延迟值。
这篇关于在css3动画中查找特定关键帧的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文