以相反的方向重用 CSS 动画（通过重置状态？）答案

【问题标题】：Reuse CSS animation in reversed direction (by resetting the state?)以相反的方向重用 CSS 动画（通过重置状态？）
【发布时间】：2016-01-25 16:26:07
【问题描述】：

我在 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/

【问题讨论】：

您的实际用例是否无法使用transition CSS 属性？ jsfiddle.net/dtaa0snd
我已经多次遇到这个问题，我找到的唯一解决方案是使用 JS 或两个不同的动画。具有不同方向的相同动画似乎在任何浏览器中都不起作用，因此它可能是预期的行为。需要深入了解规格。

标签： css animation css-animations reverse

【解决方案1】：

不，没有办法单独使用 CSS 重新启动动画。您必须使用 JavaScript 从元素中删除动画，然后将其重新应用于元素（延迟后）以使其重新启动。

以下是W3C's CSS3 Animation Spec 所说的（在不同的上下文中，但这一点也应该适用于这种情况）：

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

^重点是我

Chris Coiyer 的 CSS Tricks Article 也表明了这一点，并提供了一些用于重新启动动画的 JS 解决方案。（注意：文章引用了 Oli 的 dabblet，声称更改持续时间、迭代次数等属性会使其在 Webkit 上重新启动，但似乎已经过时，因为它们不再适用于 Chrome）。

总结：

虽然您已经谈到了以下内容，但为了完整起见，我将再次重复：

在元素上应用动画后，它会一直保留在元素上，直到被移除。
UA 会跟踪元素上的动画以及它是否已完成。
当您在 :checked 上应用相同的动画时（尽管方向不同），UA 什么也不做，因为该动画已经存在于元素上。
单击复选框时位置切换（瞬时）是因为transform 应用在:checked 选择器中。动画的存在没有任何区别。

解决方案：

从下面的 sn-p 中可以看出，即使在使用 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 的评论。如果实际用例正是小提琴中提供的，那么transition 就足够了，而animation 则不需要。转换本质上可以正向和反向工作，因此是更安全的选择。

【讨论】：