[分享]css3动画重新运行

CSS3动画可以为页面增添更多互动性和美感。当动画执行完成后，有些时候需要重新运行它。那么如何实现CSS3动画重新运行呢？ // CSS代码 .animation { animation: myAni...

CSS3动画可以为页面增添更多互动性和美感。当动画执行完成后，有些时候需要重新运行它。那么如何实现CSS3动画重新运行呢？

// CSS代码
.animation {
  animation: myAnimation 2s ease;
}

@keyframes myAnimation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
} 

上述代码定义了一个名为`myAnimation`的动画效果，将一个元素沿x轴平移100%的距离，用时2秒。在需要重新启动该动画时，可以使用以下两种方法之一来实现：

// 方法一：使用JavaScript动态修改class名称
document.querySelector('.animation').classList.remove('animation');
void document.querySelector('.animation').offsetWidth;
document.querySelector('.animation').classList.add('animation'); 

这种方法使用JavaScript动态地在元素上添加或删除CSS类名，触发CSS重新计算。删除CSS类名时需要调用offsetWidth以强制浏览器先重排，再添加CSS类名，这才有效果。另一个缺点是此方法不利于页面性能优化。

// 方法二：使用CSS变量
.animation {
  animation: var(--my-animation, myAnimation) 2s ease;
}

document.querySelector('.animation').style.setProperty('--my-animation', 'myAnimation'); 

这种方法使用CSS自定义变量`--my-animation`控制动画效果的名称。通过JavaScript代码在元素上使用style.setProperty方法动态设置自定义变量的值，即可实现动态变更动画。此方法不仅更加简洁，而且可以对页面性能优化带来帮助。