重置一个简单的javascript动画

要重置一个简单的 JavaScript 动画，可以使用以下解决方法：

1. 使用 CSS 类重置动画状态：

<div id="myElement" class="animation">动画元素</div>

<button onclick="resetAnimation()">重置动画</button>

<style>
.animation {
  animation: myAnimation 1s infinite;
}

@keyframes myAnimation {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}
</style>

<script>
function resetAnimation() {
  var element = document.getElementById("myElement");
  element.classList.remove("animation");
  void element.offsetWidth; // 强制重新布局
  element.classList.add("animation");
}
</script>

上面的代码中，我们通过给元素添加和移除 .animation 类来重置动画。在 resetAnimation 函数中，我们先移除类，然后通过使用 void element.offsetWidth 强制浏览器重新布局，然后再添加类，这样就可以重置动画。

2. 使用 JavaScript 控制动画状态：

<div id="myElement">动画元素</div>

<button onclick="resetAnimation()">重置动画</button>

<style>
@keyframes myAnimation {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}
</style>

<script>
var animation;

function startAnimation() {
  var element = document.getElementById("myElement");
  element.style.animation = "myAnimation 1s infinite";
}

function resetAnimation() {
  var element = document.getElementById("myElement");
  element.style.animation = "none";
  void element.offsetWidth; // 强制重新布局
  element.style.animation = "myAnimation 1s infinite";
}
</script>

上面的代码中，我们使用 JavaScript 控制动画的状态。在 startAnimation 函数中，我们将 animation 属性设置为 "myAnimation 1s infinite"，开始动画。在 resetAnimation 函数中，我们先将 animation 属性设置为 "none"，停止动画，然后通过使用 void element.offsetWidth 强制浏览器重新布局，最后再将 animation 属性设置为 "myAnimation 1s infinite"，重新开始动画。

这些都是简单的示例，具体的解决方法可能会根据实际情况而有所不同。希望这些代码能帮助到你！