如何在特定位置启动CSS3动画？

Question

我正在使用CSS3动画,我希望能够移动到动画中的特定位置.例如,如果CSS看起来像这样(并假装我使用了所有正确的前缀):

@keyframes fade_in_out_anim {
  0% { opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}
#fade_in_out {
  animation: fade_in_out_anim 5s;
}

然后我希望能够停止动画,并将其移动到50%标记.我想理想的JavaScript看起来像这样:

var style = document.getElementById('fade_in_out').style;
style.animationPlayState = 'paused';

// Here comes the made up part...
style.animation.moveTo('50%'); // Or alternately...
style.animationPlayPosition = '50%';

有谁知道实现这一目标的方法(希望在Webkit中)？

Answer 1

我们可以使用该animation-delay属性.通常它会延迟动画一段时间,如果设置animation-delay: 2s;,动画将在您将动画应用到元素后两秒开始.但是,您也可以使用它来强制它通过使用负值开始播放具有特定时移的动画:

.element-animation{
animation: animationFrames ease 4s;
animation-delay: -2s;
}

http://default-value.com/blog/2012/10/start-css3-animation-from-specified-time-frame/