不，没有办法单独使用CSS重新启动动画。您必须使用JavaScript从元素中删除动画，然后将其重新应用到元素（经过延迟）以重新启动。
以下是[说的（在不同的上下文中，但这一点也应适用于这种情况）：
还要注意，更改“ animation- name”的值不一定会重新启动动画（例如，如果应用了一个动画列表，并且从列表中删除了一个动画，则仅该动画将停止；其他动画将继续）。
重点是我的
注意：** 本文引用了Oli的涉猎内容，该文章声称更改持续时间，迭代计数等属性会使其在Webkit上重新启动，但由于它们已不再在Chrome上运行，因此似乎已经过时了）。
尽管您已经谈到以下内容，但为了完整性起见，我将再次重申：
从下面的代码片段中可以看出，即使使用JavaScript，使用单个动画实现此操作也非常复杂。
var input = document.getElementsByClassName("my-check@R_658_2419@")[0];
input.addEventListener('click', function() {
if (this.checked) {
this.classList.remove('my-check@R_658_2419@');
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-check@R_658_2419@');
}, 10);
}
});
input {
transform: translate3d(50px, 0, 0);
}
.my-check@R_658_2419@ {
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="check@R_658_2419@" class="my-check@R_658_2419@">
因此， （如果要坚持使用CSS动画）是 。
或者，您也可以查看Marcelo的评论。如果实际用例恰好是小提琴中提供的用例，那么transition就足够了，animation并且不是必需的。过渡本质上可以在正向和反向两个方向上起作用，因此将是一个更安全的选择。
602392714
清零编程群