我有一个需要单击重新启动的 CSS3 动画。这是一个显示剩余时间的条形图。我正在使用 scaleY(0) 变换来创建效果。
现在我需要通过将条恢复到 scaleY(1) 并让它再次转到 scaleY(0) 来重新启动动画。我第一次尝试设置 scaleY(1) 失败了，因为它需要同样的 15 秒才能恢复到全长。即使我将持续时间更改为 0.1 秒，我也需要延迟或链接 scaleY(0) 的分配以让 bar 补货完成。这么简单的任务，感觉太复杂了。
我还发现了一个有趣的技巧，可以通过从文档中删除元素来重新启动动画，然后重新插入它的一个副本：http : //css-tricks.com/restart-css-animation/
它有效，但是有没有更好的方法来重新启动 CSS 动画？我正在使用 Prototype 和Move.js，但我不限于它们。
不需要超时，使用回流来应用更改：
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>只需animation通过 JavaScript将属性设置为"none"，然后设置一个超时，将属性更改为""，因此它再次从 CSS 继承。
Webkit 的演示在这里：http : //jsfiddle.net/leaverou/xK6sa/ 但是，请记住，在实际使用中，您还应该包括 -moz-（至少）。
如果你有一些类CSS3动画，为exapmle .blink那么你可以removeClass一些元素和addClass这个元素想到的setTimeout与1个milisecond通过点击。
$("#element").click(function(){
$(this).removeClass("blink");
setTimeout(function(){
$(this).addClass("blink);
},1 ///it may be only 1 milisecond, it's enough
});
animationend事件处理函数在动画完成时移除描述符，以便下次您想要重新启动动画时再次添加它。---HTML---
<div id="animatedText">
Animation happens here
</div>
<script>
function startanimation(element) {
element.classList.add("animateDescriptor");
element.addEventListener( "animationend", function() {
element.classList.remove("animateDescriptor");
} );
}
</script>
<button onclick="startanimation( document.getElementById('animatedText') )">
Click to animate above text
</button>
---CSS---
@keyframes fadeinout {
from { color: #000000; }
25% {color: #0000FF; }
50% {color: #00FF00; }
75% {color: #FF0000; }
to { color : #000000; }
}
.animateDescriptor {
animation: fadeinout 1.0s;
}
在这里试试：
您也可以使用 display 属性，只需将 display 设置为 none。
display:none;
并且更改支持它阻止（或您想要的任何其他属性）。
display:block;
使用 JavaScript。
它会产生惊人的效果。