css动画是可以暂停的

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

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

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