css动画重新开始 |css3 正在加载的图标

// 方式一：通过修改CSS属性来触发重新开始动画
// 在CSS样式中定义动画
div {
animation: myanim 1s ease forwards;
}
// JavaScript代码中通过修改CSS属性的方式重新开始动画
var divElement = document.querySelector('div');
divElement.style.animation = 'none'; // 先将动画设为none，以便下面的代码生效
void divElement.offsetWidth; // 重绘，让CSS属性修改生效
divElement.style.animation = ''; // 将动画设回原本的值，触发重新开始动画
// 方式二：通过改变class名称
// 在CSS样式中定义动画和一个class
div {
animation: myanim 1s ease forwards;
}
div.play {
animation-play-state: running;
}
// 通过JavaScript代码将class名称替换
var divElement = document.querySelector('div');
divElement.classList.remove('play'); // 先将class名称移除
void divElement.offsetWidth; // 重绘，让class名称的修改生效
divElement.classList.add('play'); // 将class名称替换回去，重新开始动画

总结：无论是通过修改CSS属性还是改变class名称，都需要先将动画设为none或移除class名称，再通过一次重绘(比如获取元素的offsetWidth属性)来让修改生效，最后再将原来的CSS属性或新的class名称重新设回去，从而触发重新开始动画。希望本文能对大家在实现CSS动画时有所帮助。