js 暂停css动画

js yekong

js在css动画执行到一定时间后,需要暂停动画,这里使用js进行控制。

html

<img src="../images/tagbg.png" id="xuanzhuan" class="xuanzhuan tagbg" alt="">

js

setTimeout(() => {
document.getElementById('xuanzhuan').style.animationPlayState = 'paused'
            }, 1000)

css

.xuanzhuan {
  animation: rotate 5s linear infinite;
  //animation-iteration-count: 0.5;
}

@keyframes rotate {
  0% {
    transform: rotateZ(0deg); /*从0度开始*/
  }
  100% {
    transform: rotateZ(360deg); /*360度结束*/
  }
}

喜欢