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

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

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

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

还要注意，更改“ 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" >

因此， 最好的选择 （如果要坚持使用CSS动画）是 使用两种不同的动画 。

或者，您也可以查看Marcelo的评论。如果实际用例恰好是小提琴中提供的用例，那么

transition

就足够了，

animation

并且不是必需的。过渡本质上可以在正向和反向两个方向上起作用，因此将是一个更安全的选择。