📆

动画的暂停、播放、重播

一、关键帧动画

animation-play-state 属性有 running 和 paused 两个值:
  • running :默认值,表示当前动画正在播放
  • paused :表示当前动画暂停播放
当动画被暂停时,它会保留动画最后计算的值,你的动画会从暂停的地方继续开始,就像你在媒体播放器上使用播放和暂停功能时所期望的那样。
  • 默认情况下,关键帧动画是自动播放的,除非你显式设置了 animation-play-state 属性的值为 paused

二、CSS 过渡动画

  • 过渡动画不会在中途停止,也不会保留属性的中间值
 

三、使用技巧

1.CSS

2.js控制

四、重播

css目前没有可以让动画从当前位置,重新到开头重新播放的能力,只能借助js,跟恢复播放不是一个东西