CSS animation-play-state属性

animation-play-state属性

CSS animation-play-state属性，可设置@keyframes定义的动画是运行还是暂停。

---

语法

animation-play-state: value

可选属性值

属性值	描述
paused	动画暂停
running	动画播放

animation-play-state实例代码，及在线编辑器

下方实例中，动画原本是暂停的（animation-play-state属性值为paused），当点击按钮时，动画的animation-play-state属性值将被设置为running：

<div id='d2'></div><br>

<button onclick="setColor()">按钮</button>


<style>
@keyframes bgcChange{
  from {background-color:skyblue;}
  to{background-color:orange;}
}
#d2{width:100%;height:50%;background-color:skyblue;animation-name:bgcChange;animation-duration:2s;animation-play-state:paused;}
</style>

<script>
  function setColor(){
    var d = document.getElementById('d2')
    d.style.animationPlayState = "running"
  }
</script>

试一试