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/

Answer 1

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

以下是W3C's CSS3 Animation Spec所说的内容（在不同的背景下，但这一点也适用于此案例）：

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

^{重点是我的}

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

<强>要点：

虽然你已经触及了以下内容，但为了完整起见，我将重新进行迭代：

在元素上应用动画后，它将保留在元素上，直到删除它为止。
UA会跟踪元素上的动画以及它是否已完成。
当您在:checked上应用相同的动画时（虽然方向不同），UA不执行任何操作，因为动画已存在于元素上。
点击复选框时切换位置（即时）是因为transform选择器中应用了:checked。动画的存在没有任何区别。

<强>解决方案：

从下面的代码片段中可以看出，即使使用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动画）是使用两种不同的动画。

或者，你也可以看看马塞洛的评论。如果实际用例正是小提琴中提供的内容，那么transition就足够了，animation不是必需的。转换本质上可以在正向和反向方向上工作，因此是更安全的选择。

反向重复使用CSS动画（通过重置状态？）

1 个答案: