CSS动画中途停止并维持姿态代码实例

本篇文章小编给大家分享一下CSS动画中途停止并维持姿态代码实例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

一、仅用CSS

使用该属性使一段动画在其运动周期中暂停.,并且下次开始时直接从当前这一帧开始. 这是一个动画属性,它对animation属性生效, 你既可以在CSS中使用它,也可以在JS中使用它,同样的方便,至少…比获取角度再赋值好到不知道哪里去.

css;">.xxx {
  animation-play-state: paused;  
  //该属性一旦被添加,CSS动画会立即暂停,并且保持于当前帧
}

.xxx {
  animation-play-state: running; 
  //该属性一旦被添加,CSS动画会立即从当前帧开始运作;
}

你可以给一个页面元素添加一个animation,然后设置当hover状态时加上

 animation-play-state:paused

动画就会在你鼠标追上那个元素时停止.

二、仅用JS

//i等于1时媒体播放并且音符飘动,i等于0时媒体暂停音符暂停.
            if (i == 1) {
                right.style.animationPlayState = "paused"
                audio.pause();
                i = 0;
            } else {
                right.style.animationPlayState = "running";
                audio.play();
                i = 1;
            }