[分享]css3动画重新播放

CSS3动画是一种非常流行的网页动画效果，但是有时候我们需要让动画重新开始播放。那么应该如何实现呢？// HTML代码 // CSS3代码 .box { width: 100px; height: ...

CSS3动画是一种非常流行的网页动画效果，但是有时候我们需要让动画重新开始播放。那么应该如何实现呢？

// HTML代码
<div class="box"></div>

// CSS3代码
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: move 2s infinite;
}

@keyframes move {
    from { transform: translateX(0); }
    to { transform: translateX(200px); }
}

// JavaScript代码
var box = document.querySelector('.box');
box.addEventListener('click', function() {
    box.style.animation = 'none';
    box.offsetHeight; // 强制浏览器重新渲染元素
    box.style.animation = 'move 2s infinite';
}); 

上述代码中，我们首先定义了一个红色的正方形盒子，应用了一个名为“move”的动画，会让盒子平移200像素。接下来，我们利用JavaScript监听盒子的点击事件，一旦点击发生，就先将动画属性（animation）设为“none”，然后强制浏览器重新渲染盒子元素，最后将动画属性设为“move”重新应用动画效果。

通过这段示例代码，我们可以看到如何使用JavaScript实现CSS3动画重新播放功能，可以让网页动画效果更加生动丰富。