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

Question

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

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

---

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

---

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);

Answer 1

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

Answer 2

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

你這裏的屬性名寫錯了

Answer 3

我也在找怎麼用事件重啟css3 animation動畫呢，可是我發現這個問題不知道是太簡單還是什麼，在國內根本就找不到答案，我隻能硬著頭皮去stackoverflow去搜，很巧合的是我也找到了你的那篇文章，寫的很棒很詳細，雖然英文不好，但獲益良多，我很納悶為什麼看似簡單的問題卻根本百度不到，難道大家都沒遇到過嗎

Answer 4

這個問題我也遇到過, 所幸還好容易解決. 給要動畫的dom元素上加個可控製的CSS。

js. 控製 $('.animation').removeClass('active').delay(10).queue(function(next){

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

Answer 5

在IPHONE9.1上還是不行。 PC瀏覽器正常。有沒有解決辦法？

Answer 6

為何不用animationend事件，這個也很好做兼容

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