css3动画如何停止

本文将详细介绍CSS3动画的停止方法。CSS3动画是一种比过去更加流畅的动画技术，通常由CSS代码完成，但如果不停止它们，动画仍会继续运行。

1. Stop方法

1.1 通过animation-name和animation-play-state停止动画

使用CSS的animation-play-state属性暂停或继续动画播放。通过设置animation-play-state为paused，可以暂停动画。这个属性需要一个值，只有两个可能的值。当animation-play-state被设置为“paused”时，动画将停止并在最后一帧处定格。相反，当animation-play-state被设置为“running”时，动画将重新开始播放。

以下代码为通过animation-name和animation-play-state方式的实现：

.stop-animation {
    -webkit-animation-play-state: paused!important;
    -moz-animation-play-state: paused!important;
    animation-play-state: paused!important;
}

1.2 通过animation的none值停止动画

设置CSS的animation属性并将其值设置为“none”可以删除动画。此CSS属性反转了animation-name和animation-duration属性定义的所有动画属性。以下代码清空了原有动画效果并停止动画执行：

.stop-animation {
    -webkit-animation: none!important;
    -moz-animation: none!important;
    animation: none!important;
}

2. jQuery方法

jQuery作为一个非常强大的JavaScript库，提供了一个呈现动画的数据滤镜。幸运的是，利用该库可以轻松地停止动画。

2.1 通过.stop方法停止动画

可以使用流行的jQuery.js库中的.stop（）方法来停止动画。.stop（）方法停止当前正在运行的动画。当前被选元素的所有排队动画也将被清除。.stop方法有几个可选参数，可以在停止动画时使用。点击按钮后运行以下代码段即可停止动画：

$('.stop-animation').stop();

2.2 通过.clearQueue方法清空动画队列

使用另一个jQuery方法.clearQueue（）可以直接清空动画队列。这个方法有时非常有用，在动画队列中有许多动画时可以保存代码简洁。运行以下代码即可清空动画队列：

$('.stop-animation').clearQueue();

3. javascript方法

在HTML页面中使用JavaScript设置动画通常通过编写动画函数来完成。从JavaScript中删除动画的最常见方法是使用.clearInterval()方法。以下是JavaScript方式暂停CSS3动画的代码段。

3.1 通过clearInterval方法停止动画

以下js代码段可以通过设置它的ID（setTimeoutId）停止动画：

var setTimeoutId = setTimeout;
clearTimeout(setTimeoutId);

这些是CSS3动画的几种停止方法。您可以根据自己的实际情况适当选择停止方法。