首页 >web前端 >css教程 >如何高效重启CSS3动画?

如何高效重启CSS3动画?

Barbara Streisand
Barbara Streisand原创
2024-12-17 12:43:26879浏览

How Can I Efficiently Restart CSS3 Animations?

重新启动 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>

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

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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn