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

我正在使用CSS3动画，我希望能够移动到动画中的特定位置。举例来说，如果CSS看起来像这样（和假装我用所有适当的前缀）：如何在特定位置启动CSS3动画？

@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的）？

来源

2012-05-10 Joel A. Shinness

你能否提供更多的信息，你在做什么目标？因为如果你只是想在中途点开始动画，我会推荐两个动画，一个是50％，另一个是全部效果，然后用类选择它们。 – OverZealous

我希望能够创建一个滑块或触摸交互，让用户沿着动画擦洗。我决定把动画分成几个阶段，直到我找到如何去做我需要的东西。 –

我们可以使用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/

来源

2012-12-03 16:10:33

这应该是选定的答案。这很容易实施，而且很明确。 – Adam

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

回答

相关问题