如何在特定地点启动CSS3动画？ [英] How can I start CSS3 Animations at a specific spot?

问题描述

我使用CSS3动画，我想能够移动到动画中的特定位置。例如，如果CSS看起来像这样（假装我使用所有正确的前缀）：

I'm using CSS3 Animations, and I want to be able to move to a specific spot in the animation. For instance, if the CSS looks like this (and pretend that I used all the proper prefixes):

@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看起来像这样：

then I would like to be able to stop the animation, and move it to the 50% mark. I guess that the ideal JavaScript would look something like this:

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中）？

Does anyone know of a way to make this happen (hopefully in Webkit)?

推荐答案

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

We can use the animation-delay property. Usually it delays animation for some time, and, if you set animation-delay: 2s;, animation will start two seconds after you applied the animation to the element. But, you also can use it to force it to start playing animation with a specific time-shift by using a negative value:

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

http://default-value.com/blog/2012/10/start-css3-animation-from-指定时间范围/

这篇关于如何在特定地点启动CSS3动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！