CSS 动画是 Web 开发中常用的技术之一，它可以通过设置动画效果来为网页增添更多的活力和趣味性。但是有时候，我们需要对动画进行控制，手动停止或重新启动它。那么，如何实现 CSS 动画的停止和启动呢？

/* 在 CSS 中定义一个动画 */
@keyframes example {
from {opacity: 0;}
to {opacity: 1;}
}
/* 设置元素应用动画 */
div {
animation-name: example;
animation-duration: 2s;
}

以上是一个简单的定义和应用 CSS 动画的例子。接下来，我们来看看如何通过 JavaScript 控制它的播放。

const element = document.querySelector('div');
/* 暂停动画 */
element.style.animationPlayState = 'paused';
/* 恢复动画 */
element.style.animationPlayState = 'running';

上面代码中，我们通过获取应用动画的元素，使用style属性中的animationPlayState属性来控制动画的播放状态。将其设置为paused即可停止动画，将其设置为running则可以恢复动画。

除了直接在 JavaScript 中控制动画，我们也可以通过 CSS 类的添加和删除来实现动态的停止和启动。

/* 定义一个动画类 */
.stop-animation {
animation-play-state: paused !important;
}
/* JavaScript 中添加该类 */
const element = document.querySelector('div');
element.classList.add('stop-animation');
/* JavaScript 中删除该类 */
element.classList.remove('stop-animation');

我们在 CSS 中定义了一个名为stop-animation的类，其中设置了animation-play-state为paused。在 JavaScript 中添加该类即可停止动画，删除该类即可恢复动画。

通过上述的方法，我们可以控制 CSS 动画的停止和启动，进一步定制页面效果。