css3怎么让animation动画停止

介绍：

CSS3提供的animation动画是一种非常流行的动画效果，但是有时候我们需要让动画停止，而不是一直持续下去。本文将介绍如何让CSS3 animation动画停止。

方法1：使用animation-play-state属性

使用animation-play-state属性可以控制动画的播放/暂停状态，通过更改属性值可以实现动画的停止和继续播放。

.animation{
    animation-name: my-animation;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

.animation-stop{
    animation-play-state: paused;
}

方法2：使用JavaScript控制动画播放状态

使用JavaScript可以实现更加复杂的动画控制。我们可以使用JavaScript获取元素，并更改其样式属性来停止或继续播放动画。

var element = document.querySelector('.animation');
element.style.animationPlayState = "paused";

方法3：使用animation-fill-mode属性

使用animation-fill-mode属性可以控制动画停止后的状态。在动画停止时，可以让动画停留在结束状态或回到初始状态。

.animation-end{
    animation-name: my-animation;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.animation-reset{
    animation-fill-mode: backwards;
}

方法4：使用animationend事件监听动画结束

使用animationend事件可以监听动画的结束。在动画结束时，我们可以通过更改样式属性来停止动画。

var element = document.querySelector('.animation');
element.addEventListener('animationend', function(){
    element.style.animationPlayState = "paused";
});

总结：本文介绍了四种常见的方法来停止CSS3 animation动画。方法1和方法3比较简单，使用CSS属性即可实现。方法2和方法4需要使用JavaScript来控制动画状态，可以实现更加灵活的动画效果。如果你对动画结束后的状态有特殊要求，可以尝试方法3。如果需要监听动画结束事件来控制动画状态，可以使用方法4。