css3取消动画效果

温馨提示：这篇文章已超过239天没有更新，请注意相关的内容是否还可用！

CSS3提供了一种取消动画效果的方法，可以通过设置animation-play-state属性为paused来停止或取消正在运行的动画。animation-play-state属性接受两个值，分别为running和paused。当设置为running时，动画将继续播放；当设置为paused时，动画将停止播放。

在示例代码中，我们可以通过定义一个动画效果，并给它一个名称，然后通过设置animation-play-state属性来控制动画的播放状态。以下是一个示例：


<!DOCTYPE html>
<html>
<head>
    <style>
        @keyframes myAnimation {
            0% {background-color: red;}
            50% {background-color: yellow;}
            100% {background-color: blue;}
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            animation-name: myAnimation;
            animation-duration: 3s;
            animation-iteration-count: infinite;
            animation-play-state: running;
        }
        .btn {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="26f5-8bbb-ffcc-22b0 box"></div>
    <button class="8bbb-ffcc-22b0-fc3c btn" onclick="pauseAnimation()">暂停动画</button>
    <button class="a104-81e3-5a73-c919 btn" onclick="resumeAnimation()">继续动画</button>
    <script>
        function pauseAnimation() {
            var box = document.querySelector('.box');
            box.style.animationPlayState = 'paused';
        }
        function resumeAnimation() {
            var box = document.querySelector('.box');
            box.style.animationPlayState = 'running';
        }
    </script>
</body>
</html>

在这个示例中，我们定义了一个名为myAnimation的动画效果，它将在0%、50%和100%三个关键帧中改变背景颜色。然后，我们将这个动画效果应用到一个宽高为100px的方块上，并设置动画的持续时间为3秒，循环播放。初始状态下，动画处于运行状态。

在页面上，我们还添加了两个按钮，分别用于暂停和继续动画。通过JavaScript代码，我们可以获取到这个方块元素，并通过设置其style属性的animationPlayState属性来控制动画的播放状态。

当点击"暂停动画"按钮时，pauseAnimation函数会被调用，它将把方块元素的animationPlayState属性设置为'paused'，从而暂停动画的播放。而当点击"继续动画"按钮时，resumeAnimation函数会被调用，它将把方块元素的animationPlayState属性设置为'running'，从而继续动画的播放。

通过这种方式，我们可以灵活地控制动画的播放状态，实现动画的暂停和继续。这在一些需要用户交互的场景中非常有用，比如在用户点击某个按钮时暂停动画，再次点击时继续播放。我们也可以结合其他CSS3特性，比如transition过渡效果，以及JavaScript事件处理等技术，实现更加复杂和丰富的动画效果。

css3取消动画效果

相关阅读