通过重置状态，可以在相反方向中重新使用CSS动画吗？

Question

我在CSS中使用了两个关键帧动画。一个从左到右移动，另一个则使用完全相同的值，但是方向相反。

@keyframes moveLeft
{
    from {transform: translate3d(50px, 0, 0);}
    to   {transform: translate3d(0px, 0, 0);}
}


@keyframes moveRight
{
    from {transform: translate3d(0px, 0, 0);}
    to   {transform: translate3d(50px, 0, 0);}
}

不过，我想知道是否可能只使用一个关键帧动画。但是，一旦我添加了 animation-direction: reverse，动画只会播放一次。它可能保存了已经使用过一次的信息。 那么：我能否以某种方式重置这些信息？或者有没有可能在不使用JS的情况下两次以不同方向使用相同的动画？

http://jsfiddle.net/vrhfd66x/

- Rebecca

---

你的实际使用情况是否无法使用CSS属性“transition”？http://jsfiddle.net/dtaa0snd/ - Marcelo

我遇到过这个问题很多次，唯一的解决方案是使用JS或两种不同的动画。相同的动画在不同方向上似乎在任何浏览器中都无法正常工作，因此这可能是预期的行为。需要深入研究规范。 - Harry

Answer 1

不，仅使用CSS无法重新启动动画。您需要使用JavaScript从元素中删除动画，然后在延迟后将其重新应用于元素以重新启动动画。

以下是W3C的CSS3动画规范所说的（在不同的上下文中，但这一点对于此情况也适用）：

还要注意，更改“animation-name”的值并不一定会重新启动动画（例如，如果应用了动画列表并从列表中删除了一个动画，则只有该动画会停止；其他动画将继续）。为了重新启动动画，必须将其删除，然后重新应用。

^{强调是我的}

这篇由Chris Coiyer撰写的CSS Tricks文章也指出了同样的问题，并提供了一些JS解决方案来重新启动动画。（注意：该文章引用了Oli的dabblet，声称更改诸如持续时间、迭代计数等属性会使其在Webkit上重新启动，但似乎已过时，因为它们在Chrome上不再起作用）。

---

摘要：

虽然你已经触及了以下内容，但我将重申以保证完整性：

• 一旦动画应用于元素，它将一直保留在元素上，直到被移除。
• UA会跟踪元素上的动画是否完成。
• 当您在:checked上应用相同的动画（尽管方向不同）时，UA不会执行任何操作，因为动画已存在于元素上。
• 点击复选框时位置的切换（瞬间）是由于在:checked选择器中应用的transform引起的。动画的存在没有任何影响。

---

解决方案：

从下面的代码片段可以看出，即使使用JavaScript，使用单个动画实现这一点也非常复杂。

var input = document.getElementsByClassName("my-checkbox")[0];

input.addEventListener('click', function() {
  if (this.checked) {
    this.classList.remove('my-checkbox');
    window.setTimeout(function() {
      input.classList.add('anim');
      input.classList.add('checked');
    }, 10);
  } else {
    this.classList.remove('anim');
    window.setTimeout(function() {
      input.classList.remove('checked');
      input.classList.add('my-checkbox');
    }, 10);
  }
});

input {
  transform: translate3d(50px, 0, 0);
}
.my-checkbox {
  animation: moveLeft 1s;
  animation-direction: reverse;
}
.checked {
  transform: translate3d(0px, 0, 0);
}
.anim{
  animation: moveLeft 1s;
}
@keyframes moveLeft {
  from {
    transform: translate3d(50px, 0, 0);
  }
  to {
    transform: translate3d(0px, 0, 0);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<input type="checkbox" class="my-checkbox">

所以，如果您想坚持使用CSS动画，最好的选择是使用两种不同的动画。

或者，您也可以查看Marcelo的评论。如果实际使用情况与fiddle中提供的完全相同，则transition就足够了，不需要animation。过渡本质上可以在正向和反向方向上工作，因此更为安全可靠。

- Harry