如何重新运行css3的动画?
如何通过一个事件(hover
,click
..)触发css3动画的重新执行?
在stackoverflow找到一个相关的问题,但是下面给出的答案也不起作用。
http://jsfiddle.net/arunpjohny/8WQcy/1/
animation
必须是infinite
,animation-play-state
才有效。
restart用这种方法挺好:
// retrieve the element
element = document.getElementById("logo");
// reset the transition by...
element.addEventListener("click", function(e) {
e.preventDefault;
// -> removing the class
element.classList.remove("run-animation");
// -> triggering reflow /* The actual magic */
// without this it wouldn't work. Try uncommenting the line and the transition won't be retriggered.
element.offsetWidth = element.offsetWidth;
// -> and re-adding the class
element.classList.add("run-animation");
}, false);
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(6)
解释:http://www.w3school.com.cn/cssref/pr_animation-play-state.asp
测试:http://www.w3school.com.cn/tiy/c.asp?f=css_animation-play-state&p=...
为何不用animationend事件,这个也很好做兼容
你这里的属性名写错了
我也在找怎么用事件重启css3 animation动画呢,可是我发现这个问题不知道是太简单还是什么,在国内根本就找不到答案,我只能硬着头皮去stackoverflow去搜,很巧合的是我也找到了你的那篇文章,写的很棒很详细,虽然英文不好,但获益良多,我很纳闷为什么看似简单的问题却根本百度不到,难道大家都没遇到过吗
这个问题我也遇到过, 所幸还好容易解决. 给要动画的dom元素上加个可控制的CSS。
js. 控制 $('.animation').removeClass('active').delay(10).queue(function(next){
在IPHONE9.1上还是不行。 PC浏览器正常。有没有解决办法?