Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Seek to specific keyframe in css3 animation

Tags:

css

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>
like image 514
Breiz Avatar asked Oct 28 '12 16:10

Breiz


1 Answers

You can seek to a specific keyframe by using a negative animation-delay value.

like image 147
Michael Mullany Avatar answered Oct 21 '22 20:10

Michael Mullany