css3动画暂停代码

CSS3 动画是网页设计中的重要元素，可以提高页面的交互性和吸引力。但是有时候需要暂停动画，以便用户可以从动画中恢复时间和注意力。

下面是一个简单的 CSS3 动画暂停的示例：

.paused {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

上面的代码使用了 animation-play-state 属性来控制动画运行状态。当该属性值为 paused 时，动画将暂停在当前的位置。

要使用这个代码，你需要给需要暂停的元素添加一个类名，类名为 "paused"，同时动画将在属性发生变化的时候暂停。例如，你可以添加一个点击事件来触发动画的暂停：

document.querySelector('#pauseBtn').addEventListener('click',function() {
    document.querySelector('.animation').classList.toggle('paused');
});

上面的代码使用了 JavaScript 来添加点击事件，当按钮被点击时，将会切换类名 "paused"，从而暂停或继续动画。

总之，CSS3 动画暂停是一种很有用的技术，可以帮助你更好地控制动画的行为和交互体验，一定要好好掌握哦！