暂停 CSS @keyframes 动画

前端精髓

共 916字,需浏览 2分钟

 ·

2021-01-23 20:58


让我们了解一下 CSS @keyframes 动画,关于如何暂停和控制动画的方法。有一个专门用于它的 CSS 属性,也可以使用 JavaScript 进行控制,但是细节上有很多细微差别。


我注意到一些以前从未想过的事情,当前不在视口中的动画仍在运行!但这些播放的动画仍然使用 CPU / GPU!它们消耗了不必要的处理能力,从而降低了页面的其他部分的速度。


在 CSS 中真正暂停动画的唯一方法是使用 animation-play-state 带有 paused 值的属性。

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


在JavaScript中,该属性为 animationPlayState,其设置如下:

element.style.animationPlayState = 'paused';


我们可以通过读取的当前值来创建一个播放和暂停动画的切换开关 animationPlayState

const running = element.style.animationPlayState === 'running';


然后将其设置为相反的值:

element.style.animationPlayState = running ? 'paused' : 'running';


暂停动画的另一种方法是设置 animation-duration 为 0s。动画在技术上仍在运行,但是由于没有持续时间,因此您将看不到任何动作。


我们可以完全删除动画,通过 animation: none 真正暂停动画。

.remove-animation {  animation: none !important;}


总结:为了性能优化,常常在页面离开的时候需要暂停动画,如果是 CSS @keyframes 动画,通过 animation-play-state 来暂停动画执行。

浏览 32
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报