我有一个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,但我不仅限于它们。
只需animation通过JavaScript 将属性设置为"none",然后设置将属性更改为的超时,即可""再次从CSS继承。
animation
"none"
""
在超时没有必要,使用回流以应用更改:
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>