css动画是可以暂停的

前端秀儿

于 2020-03-01 17:35:47 发布

阅读量765

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/Jsoning/article/details/104596267

3 篇文章

订阅专栏

本文介绍CSS中的animation-play-state属性，该属性允许开发者控制动画的播放状态，实现动画的暂停与恢复。通过设置此属性，结合JavaScript，可以实现对动画状态的精准控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS中animation 大家经常会用到，但是布吉岛有没有和我一样的童鞋刚知道这个动画是可以暂停的。

没错，就是这个属性animation-play-state，它有两个可选值分别是播放动画running和暂停动画paused，默认这个属性是running状态并且不能使用animation缩写形式。下面来看看效果：

这里就是在hover的时候设置了这个属性


.box:hover {
    background:url(./low_hover.jpg) center no-repeat;
    animation-play-state: paused;
}

突然想到之前写项目的时候，使用css写动画，js无法判断是否动画结束只好放弃css动画改用js动画（留下了没有技术的眼泪…），既然知道了这个属性，我们就可以通过js判断这个属性的值判断动画是否结束。


let boxEl = document.querySelector('.box')
console.log(window.getComputedStyle(boxEl,null).animationPlayState) // paused / running

最后，感谢点赞，感谢阅读！

如果文章让你有收获，欢迎关注公众号，每日推送优质文章！！！