如何高效重启CSS3动画？

重新启动 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 规则和关键帧动画，如下图所示：

#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; }
}

最后，包含 HTML 标记：

<div><p>这种方法可以在您单击“重置”按钮时有效地重新启动动画，而无需用于复杂的超时或元素操作。</p></div>

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