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

Explanation: http://www.w3school.com.cn/cssref/pr_animation-play-state.asp
Test: http://www.w3school.com.cn/tiy/c.asp?f=css_animation-play-state&p=...

Answer 2

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

You wrote the attribute name wrong here

Answer 3

I am also looking for how to use events to restart css3 animation, but I find that this question is too simple or something. I can’t find the answer at all in China. I can only bite the bullet and go to stackoverflow to search, and it’s very difficult. Coincidentally, I also found your article. It was very well written and very detailed. Although my English is not good, I benefited a lot. I wonder why this seemingly simple question cannot be found on Baidu at all. Don’t you think that everyone has it? Have you ever encountered it?

Answer 4

I have also encountered this problem, but fortunately it is easy to solve. Add a controllable CSS to the DOM element to be animated.

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

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

Answer 5

Still not working on IPHONE9.1. PC browser is normal. Is there any solution?

Answer 6

Why not use the animationend event? This is also very compatible

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