CSS 控制动画播放与暂停的小技巧(非常实用)

下面是对“CSS 控制动画播放与暂停的小技巧(非常实用)”的详细讲解。

标题

CSS 控制动画播放与暂停的小技巧(非常实用)

前言

在网页设计中，动画效果经常被运用到。但有时候我们需要控制动画的播放和暂停，这时就需要使用到 CSS 控制动画播放与暂停的小技巧了。

正文

利用 animation-play-state 属性控制动画播放与暂停

animation-play-state 属性可以控制动画的播放和暂停，默认值为 running 。当我们更改属性的值为 paused 时，就可以达到动画暂停的效果。

示例代码：

.animation {
    width: 100px;
    height: 100px;
    background-color: #f00;
    animation: move 2s linear infinite;
}

@keyframes move {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%);
    }
}

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

在示例代码中，我们定义了一个名为 animation 的样式类，使用 animation 属性来让其动起来，move 动画会不断向右边移动。当我们将样式类中的 animation-play-state 属性的属性值更改为 paused 时，动画就会被暂停。

在使用中，我们可以通过 JavaScript 来控制样式类中的 animation-play-state 属性，来切换动画的播放与暂停。

利用 keyframes 属性新建可控制的动画

使用 keyframes 属性，我们可以建立一个自己的动画，并在动画结束后保持最后一个关键帧的状态。这种方式和利用 animation-play-state 属性控制动画播放与暂停类似，但它可以更好的控制动画的开始和结束，更加灵活。

示例代码：

.move {
    width: 100px;
    height: 100px;
    background-color: #f00;
    animation: mymove 2s linear infinite;
}

.mymove {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
    paused {
        animation-play-state: paused;
    }
}

在示例代码中，我们定义了一个名为 move 的样式类，使用 animation 属性来让其动起来，myMove 动画会不断向右边移动。当我们使用 myMove 样式类中的 paused 属性来控制动画时，动画就会被暂停。

利用 JavaScript 控制动画的播放与暂停

除了利用 CSS 控制动画播放与暂停，我们也可以使用 JavaScript 控制动画的开始和结束。

示例代码：

<div class="animation"></div>
<button onclick="pause()">暂停</button>
<button onclick="play()">播放</button>

<script>
var animation = document.querySelector('.animation');

function pause() {
    animation.style.animationPlayState = 'paused';
}

function play() {
    animation.style.animationPlayState = 'running';
}
</script>

在示例代码中，我们定义了两个按钮，分别用来控制动画的播放和暂停。当我们点击暂停按钮时，就会调用 pause() 函数，更改样式中的 animationPlayState 属性，达到动画暂停的效果。同样地，当我们点击播放按钮时，就会调用 play() 函数，更改样式中的 animationPlayState 属性，达到动画继续播放的效果。

结论

通过上述示例，我们可以看到利用 CSS 控制动画播放与暂停的小技巧的实际操作过程，以及 JavaScript 控制动画播放与暂停的实现方法。

参考

• CSS控制动画播放与暂停技巧分享
• HTML DOM Style animationPlayState Property