問題描述

如何通過一個事件（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’); });});