如何在不使用超时的情况下高效地重新启动 CSS3 动画？

重新审视 CSS3 动画重启：推出替代方法

重启 CSS3 动画可能会带来挑战，尤其是在尝试恢复元素的比例并将其动画恢复到原始状态时。虽然删除和重新插入元素提供了一种解决方法，但它可能不是最有效的解决方案。

更优雅的方法是利用回流来应用更改，而不依赖超时。以下 JavaScript 函数演示了此技术：

function reset_animation() {
  var el = document.getElementById('animated');
  el.style.animation = 'none';
  el.offsetHeight; /* trigger reflow */
  el.style.animation = null; 
}

结合下面的 CSS 和 HTML，此函数允许在单击时无缝重置动画：

#animated {
  position: absolute;
  top: 70px;
  width: 50px; height: 50px;
  background-color: black;
  animation: bounce 3s ease-in-out infinite;
}
@keyframes bounce {
  0% { left: 0; }
  50% { left: calc( 100% - 50px ); }
  100% { left: 0; }
}

<div><p>通过触发回流后，动画将被重置，无需复杂的延迟或计时。这种方法为重新启动任何 CSS3 动画提供了一个干净高效的解决方案。</p></div>

以上是如何在不使用超时的情况下高效地重新启动 CSS3 动画？的详细内容。更多信息请关注PHP中文网其他相关文章！