在 CSS3 中重启动画：有比删除元素更好的方法吗？

Question

我有一个 CSS3 动画，需要在单击时重新启动。这是一个显示剩余时间的条形图。我正在使用 scaleY(0) 变换来创建效果。

现在我需要通过将条恢复到 scaleY(1) 并让它再次转到 scaleY(0) 来重新启动动画。我第一次尝试设置 scaleY(1) 失败了，因为它需要同样的 15 秒才能恢复到完整长度。即使我将持续时间更改为 0.1 秒，我也需要延迟或链接 scaleY(0) 的分配才能让条形补货完成。对于这样一个简单的任务来说感觉太复杂了。

我还发现了一个有趣的技巧，可以通过从文档中删除元素来重新启动动画，然后重新插入它的克隆： http ://css-tricks.com/restart-css-animation/

它可以工作，但是有没有更好的方法来重新启动 CSS 动画？我正在使用 Prototype 和 Move.js ，但我并不局限于它们。

原文由 Leo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

只需通过 JavaScript 将 — animation 属性设置为 "none" 然后设置一个超时，将属性更改为 "" ，再次从 CSS 继承。

Webkit 演示在这里：http: //jsfiddle.net/leaverou/xK6sa/ 但是，请记住，在实际使用中，您还应该包括 -moz-（至少）。

原文由 Lea Verou 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

不需要超时，使用 回流 来应用更改：

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

 #animated {
  position: absolute;
  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 id="animated"></div>
<button onclick="reset_animation()">Reset</button>

原文由 user 发布，翻译遵循 CC BY-SA 4.0 许可协议