如何有效重启CSS3动画？

有效恢复 CSS3 动画

重新启动 CSS3 动画可能是一项具有挑战性的任务。本问题研究了一种情况，其中使用scaleY(0) 变换对条进行动画处理以描绘剩余时间，并且需要在将动画恢复到scaleY(0) 之前将动画重置为scaleY(1)。

虽然最初尝试通过设置scaleY(1)来重置动画被证明是无效的，但该问题提出了一个有趣的解决方案，即删除并重新插入动画元素的克隆以重新启动动画。然而，这种方法可能不是最有效或最直接的方法。

不依赖元素移除和重新插入，更实用的解决方案是利用回流技术。此技术涉及暂时删除动画样式、触发重排以应用更改，然后重置动画样式。通过将以下 JavaScript 函数合并到代码中：

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

然后在事件（例如单击按钮）上触发此函数，可以有效地重置动画。这种方法提供了一种简单有效的重新启动 CSS3 动画的方法。

以上是如何有效重启CSS3动画？的详细内容。更多信息请关注PHP中文网其他相关文章！