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

Z时代
2024-01-10
分类：问答

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

回答：

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

以下是[说的（在不同的上下文中，但这一点也应适用于这种情况）：

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

重点是我的

注意：**

本文引用了Oli的涉猎内容，该文章声称更改持续时间，迭代计数等属性会使其在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">