Seek to specific keyframe in css3 animation
css
Solution
You can seek to a specific keyframe by using a negative animation-delay value.
Problem
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... 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';` OR `document.getElementById('ball').style.webkitAnimationPlayState='running';` HTML ``` <svg id="ball" class="myStyle">[...]</svg> ```