Procure um quadro-chave específico na animação css3
Eu estou fazendo uma animação css3 keyframe muito longa e eu gostaria de ser capaz deprocurar um quadro-chave específico - portanto, exiba-o - e depois reproduza a animação a partir dele. A reprodução / pausa / reversa da animação é excelente.
Aqui está o que eu tenho até agora. Eu posso começar / pausar, inverter, mas não procurar-se ...
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);}
}
JSdocument.getElementById('ball').style.webkitAnimationPlayState='paused';
OU
document.getElementById('ball').style.webkitAnimationPlayState='running';
<svg id="ball" class="myStyle">[...]</svg>