重新启动 CSS3 动画

在用户交互时恢复 CSS3 动画是一项常见任务。虽然删除并重新插入动画元素可能看起来很有效，但它引入了不必要的复杂性。通过利用重排的力量来无缝重置动画，出现了更完善的解决方案。

重排是重新格式化和重新绘制文档结构的过程，提供了一种在不中断动画时间轴的情况下更改样式的便捷机制。通过将动画属性简单地设置为“none”，然后触发重排，浏览器会收到一个信号来忽略任何正在进行的动画。这允许后续样式更改立即生效，从而有效地重新启动动画。

为了说明这一点，请考虑以下 JavaScript 片段：

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

触发时，此函数会暂停“动画”元素上的动画，强制浏览器重新绘制，然后将动画属性恢复到其原始状态。通过避免动画分配的延迟或链接，此方法简化了动画重置过程，确保流畅的视觉体验。