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

我有一个 CSS3 动画，需要单击重新启动。这是一个显示还剩多少时间的栏。我使用scaleY(0) 变换来创建效果。

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

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

它可以工作，但是有更好的方法来重新启动 CSS 动画吗？ 我正在使用原型和Move.js http://visionmedia.github.com/move.js/，但我并不局限于它们。

无需超时，使用reflow https://stackoverflow.com/questions/27637184/what-is-dom-reflow应用更改：

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

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

<div id="animated"></div>
<button onclick="reset_animation()">Reset</button>