有没有一种方法可以重新启动 CSS 动画，而无需克隆元素、回流 DOM、等待（setTimeout/onAnimationEnd）？
EDIT:无需 jQuery 或检查。
我基本上只是在下一个绘制的帧处重新启动动画。
此方法不会克隆任何元素、重排文档、设置任何超时或等待动画完成。
它 100% 灵活，不需要 jQuery。
我还没有见过类似的东西（甚至在CSS 技巧）所以我想与您分享我的想法并听取您的想法。
浏览器支持
document.querySelector('.box').onclick = function(){
requestAnimation( this );
};
var requestAnimation = function( obj ){
obj.style.animation = 'none';
window.requestAnimationFrame(function(){
obj.style.animation = 'myAnimation 1s';
});
}
html{ background: #212121; }
.box{
width: 150px;
background: white;
cursor: pointer;
text-align: center;
margin: auto;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 3px black;
}
span{
float: right;
color: grey;
}
@keyframes myAnimation{
from{ background: grey; transform: scale(1.2); }
to{ background: white; transform: scale(1); }
}
<div class="box">I can animate forever!</div>
<span>By Luca Rossi</span>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
