如何使用animation-play-state控制动画的暂停与播放？

什么是animation-play-state属性？

animation-play-state属性用于控制动画的播放状态，可以将动画设置为暂停或播放。该属性接受两个值：paused和running。默认值为running。

如何使用animation-play-state属性？

要使用animation-play-state属性，需要先选中要控制的动画元素，并设置其相应的样式。以下是一个简单的示例：

<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        animation: myAnimation 2s infinite;
    }

    @keyframes myAnimation {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(200px);
        }
    }
</style>

<div class="box"></div>

在上述示例中，我们创建了一个宽高为100px的红色方块，并给它添加了一个名为myAnimation的动画，该动画会在2秒内无限循环播放。接下来，我们可以使用animation-play-state属性来控制该动画的播放状态。

var box = document.querySelector('.box');

function toggleAnimation() {
    if (box.style.animationPlayState === 'paused') {
        box.style.animationPlayState = 'running';
    } else {
        box.style.animationPlayState = 'paused';
    }
}

box.addEventListener('click', toggleAnimation);

上述代码通过监听红色方块的点击事件，来切换动画的播放状态。如果动画当前是暂停状态，则点击后恢复播放；如果动画当前是播放状态，则点击后暂停。

总结

通过使用animation-play-state属性，我们可以轻松地控制动画的暂停与播放。只需设置元素的animation-play-state属性为paused或running，即可实现动画的暂停与播放效果。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： 如何使用transition属性实现元素的过渡动画
• 下一篇： 如何使用animation-direction控制动画的播放方向？