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

我在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);}
}

但是，我想知道是否可以只使用一个关键帧动画。但只要我添加

动画方向：反转

，动画只播放一次。它可能会保存以前使用过的信息。 那么：我可以以某种方式重置此信息吗？或者是否有可能在不同方向上使用一个动画两次？（不使用JS）

---

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

以下是报告所说的（在不同的背景下，但这一点也适用于本案例）：

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

重点是我的

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

---

摘要：

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

• 在元素上应用动画后，动画将保留在元素上，直到将其删除
• UA会跟踪元素上的动画以及动画是否已完成
• 当您在

  ：checked

  （尽管方向不同）上应用相同的动画时，UA不会执行任何操作，因为该动画已存在于元素上
• 单击复选框时的位置切换（瞬时）是因为在

  ：checked

  选择器中应用了

  变换。动画的存在没有任何区别

---

解决方案：

正如您从下面的代码片段中看到的，即使在使用JavaScript时，用单个动画实现这一点也相当复杂

var input=document.getElementsByClassName（“我的复选框”）[0]；
input.addEventListener（'click'，function（）{
如果（选中此项）{
this.classList.remove（'my-checkbox'）；
setTimeout（函数（）{
input.classList.add（'anim'）；
input.classList.add（'checked'）；
}, 10);
}否则{
this.classList.remove（'anim'）；
setTimeout（函数（）{
input.classList.remove（'checked'）；
input.classList.add（'my-checkbox'）；
}, 10);
}
});
输入{
变换：translate3d（50px，0，0）；
}
.我的复选框{
动画：左移1s；
动画方向：反向；
}
.检查{
变换：translate3d（0px，0，0）；
}
.阿尼姆{
动画：左移1s；
}
@关键帧向左移动{
从{
变换：translate3d（50px，0，0）；
}
到{
变换：translate3d（0px，0，0）；
}
}

您的实际用例是否无法使用
转换
CSS属性？我已经多次遇到这个问题，唯一的解决办法就是使用JS或两个不同的动画。不同方向的相同动画似乎在任何浏览器中都不起作用，因此这可能是预期的行为。需要深入研究规格。