css3动画 - 如何重新运行css3的动画？

问题描述

如何通过一个事件（hover，click..）触发css3动画的重新执行？在stackoverflow找到一个相关的问题，但是下面给出的答案也不起作用。

http://jsfiddle.net/arunpjohny/8WQcy/1/

这篇文章挺好的，介绍了重新运行css3动画的不同方法

animation必须是infinite，animation-play-state才有效。

restart用这种方法挺好：

// retrieve the elementelement = 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);

问题解答

解释：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=...

$it.css(’-webkit-animation-play-state’, ’running’);

你这里的属性名写错了

我也在找怎么用事件重启css3 animation动画呢，可是我发现这个问题不知道是太简单还是什么，在国内根本就找不到答案，我只能硬着头皮去stackoverflow去搜，很巧合的是我也找到了你的那篇文章，写的很棒很详细，虽然英文不好，但获益良多，我很纳闷为什么看似简单的问题却根本百度不到，难道大家都没遇到过吗

这个问题我也遇到过, 所幸还好容易解决. 给要动画的dom元素上加个可控制的CSS。

js. 控制 $(’.animation’).removeClass(’active’).delay(10).queue(function(next){

$(this).addClass(’active’); next(); //让下面的队列函数得以执行; 猜的 });回答5：

在IPHONE9.1上还是不行。 PC浏览器正常。有没有解决办法？

为何不用animationend事件，这个也很好做兼容

el.addEventListener(’click’,function(){ this.classList.add(’active’); this.addEventListener(’animationend’,function(){this.classList.remove(’active’); });});