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度结束*/
}
}