私はかなり長いキーフレーム 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>