javascript - 如何在特定位置启动 CSS3 动画?

标签 javascript css webkit css-animations

我正在使用 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 中)?

最佳答案

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

关于javascript - 如何在特定位置启动 CSS3 动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10540720/

相关文章:

javascript - 如何通过点击同一个按钮多次更改网页背景颜色?

javascript - 在 webpack.config.js 中使用扩展运算符的语法错误

html - 容器不适用于整个内容

css - 如何使用 Less CSS 将元素部署到 Heroku?

firefox - 如何在 Firefox/Chrome 中保存选项卡的内存状态?

javascript - fullcalendar locale 未捕获类型错误 : e. fullCalendar.datepickerLocale 不是函数

Javascript 从 div 位置获取单选按钮值

jQuery 随机颜色 - 悬停时设置不起作用

css - 为什么 webkit 浏览器无法突出显示该网站中的选定文本?

swift - WKNavigationResponse 不再通过其 response.header 提供对 cookie 的访问