css动画重新开始

在使用CSS动画时，我们经常需要重新开始这些动画，以让它们在用户操作时重新运行。下面介绍几种实现CSS动画重新开始的方式。

// 方式一：通过修改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样式中定义动画和一个classdiv {
    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动画时有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！