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

【问题标题】：How can I start CSS3 Animations at a specific spot?如何在特定位置启动 CSS3 动画？
【发布时间】：2012-05-19 10:08:00
【问题描述】：

我正在使用 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 中）？

【问题讨论】：

你能提供更多关于你的目标的信息吗？因为如果你只是想在中途点开始动画，我推荐两种动画，一种从 50% 开始，一种是全效果，然后使用类在它们之间进行选择。
我希望能够创建一个滑块或触摸交互，让用户沿着动画滑动。我已经决定将动画分成几个阶段，直到我知道如何做我需要的。

标签： javascript css webkit css-animations

【解决方案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/

【讨论】：

这应该是选择的答案。它易于实施且清晰。