重新运行CSS动画

---

国内关于重新运行CSS动画的资料较少，本文译自Restart CSS Animation并进行扩展，有需要的可以参考，文章如有问题希望能指正。

---

对于CSS animation（和@keyframes），“重新运行”并不像你想象中那么容易。
　　假如你将它设置成运行一次：

/* CSS /
 .run-animation {
 -webkit-animation: my-fancy-animation 5s 1;
 -moz-animation: my-fancy-animation 5s 1;
 animation: my-fancy-animation 5s 1;
 }

　　你将它运行在你的logo上：

/ HTML */
 

 Fancy Logo
 
 

---

方法1：切换class####

在某些情况下你可能想让这段动画再次运行，例如通过一次点击。你可能想CSS会提供一种方式来再次启动它，但据我所知并没有。你也许甚至尝试通过JavaScript（jQuery)来移除并重新添加class name ^注.。

 /* jQuery /
 $('#logo').click(function(){
 // 不起作用
 $(this).removeClass('run-animation').addClass('run-animation');
 });

　　~~注：在碰到这个问题时译者我也曾使用上述办法，确实不起作用，后来经改造后，使用toggleClass就解决了，如下：

/ jQuery */
 $('#logo').click(function(){
 // 起作用了
 $(this).toggleClass('run-animation');
 //那文章后面还有用么？我也不知道，边看边翻译，希望有惊喜_
 });

~~

---

方法2：重载元素####

如果你在removeClass和addClass之间设置一个很低的延迟（如setTimeout()），这就起作用（上文toggle就有这个效果），但这不是很理想。真正需要做的是将元素从页面完全移除，然后重新插入它。我们使用jQuery来进行演示，步骤是克隆原始元素，插入到自身之后，移除原始元素。

/* jQuery */
 $('#logo').click(function(){
 var el = $(this),
 newone = el.clone(true);
 el.before(newone);
 $('.' + el.attr('classs') + 'last').remove();
 });
 

　　或用最基本的JavaScript：

 var elm = this,
 newone = elm.cloneNode(true);
 elm.parentNode.replaceChild(newone, elm);
 

点击查看演示

---

方法3：相同动画，不同名字####

同样的问题存在于任何类型的事件中。例如你设置了一个会直接运行的动画，并需要在:hover 时再次运行。同样的问题，它不会再次运行。Oli Studholme对此有些有趣的研究。围绕这个问题的一个方法是通过两个除名字外，其它完全相同的动画，然后你可以切换到那个用于:hover事件（或其它事件），它会起作用。

/* CSS */
 img {animation: spin-cat-1 2s;}
 img:active {animation: spin-cat-2 2s;}
 @keyframes spin-cat-1 {50%{transform:rotateY(180deg);}}
 @keyframes spin-cat-2 {50%{transform:rotateY(180deg);}}
 

点击查看演示
　　CSS预处理器可以帮助简化维护,通过导入代码块所以你只需要维护一次,但最终y轴代码量增加。不幸的是你也不能在一个声明种定义多个关键帧动画的名字，虽然这是有用的（不单单为了这个，还有更复杂的动画，你可以在基础关键帧动画上重写某些关键帧）。
Oli考虑了各种技术来解决这个问题，如改变altering duration，delays，和iterations来代替改变名字。但在我看来，这些甚至比不上改变名字。

---

方法4：切换class####

在删除和添加class之间触发一个回流。例如：

/* JavaScript */
 //检索元素
 element = document.getElementById("logo");
 //重设transition,通过：
 element.addEventListener("click", function(e) {
 e.preventDefault;
 // ->移除class
 element.classList.remove("run-animation");
 // ->触发回流，真实的魔法！！！...
 // 缺少下面这句不会运行。尝试删除这句动画不会被再次触发
 element.offsetWidth = element.offsetWidth;
 
 
    // ->重新添加class
    element.classList.add("run-animation");
 
 
}, false);
 

---

其他####

以下是记录的相关要点：你也可以影响通过JavaScript改变CSS animation的播放状态，如暂停和重新启动。

element.style.webkitAnimationPlayState="paused";
 element.style.webkitAnimationPlayState="running";

　　显然，需要考虑到其他厂商的前缀属性。
　　有趣的是,一般的CSS动画不会设置play-state为“pause”。你必须要自己设置。如果你想每当:hover时重新启动animation，你可以使用jQuery：

$("#thing").hover(function() {
 this.style.webkitAnimationPlayState = "running";
 $(this).on('webkitAnimationEnd', function() {
 this.style.webkitAnimationPlayState = "paused";
 });
 });
 

　　注意：你必须留意应该通过AnimationEnd事件将它设置回“pause”否则它的重启不会像你想的那样。

---

译者结语####

以上就是关于重新运行CSS动画的全文翻译了，toggleClass的方法是特定场景才能用，来源。以上如有存在纰漏，希望能提出。
　　关于CSS动画的兼容处理与AnimationEnd还有一些非常有用的扩展，但要等找到工作后再总结了。

---