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>