1. 首页
  2. 问题
  3. 重新启动CSS3中的动画：是否有比删除元素更好的方法？
小编典典

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

javascript

我有一个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，但我不仅限于它们。


阅读 311

收藏
2020-05-01

共2个答案

小编典典

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

2020-05-01
小编典典

在超时没有必要，使用回流以应用更改：

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>
2020-05-07