首页 > 建站教程 > JS、jQ、TS >  css3 animation动画执行结束,停顿几秒后重新开始执行正文

css3 animation动画执行结束,停顿几秒后重新开始执行

    要实现css3 animation动画执行结束,停顿几秒后重新开始执行的效果,首先想到的是延时执行:animation-delay,然后设置animation-iteration-count为infinite,即无限执行。但是不行,只有第一次执行的之后,会有延时,后面就是不停顿的执行。设置关键帧,也不好弄,那就借助js吧,思路很简单,将animation写进一个class里面,然后通过js的判断+setTimeout延时,增删这个class样式:

    1、css代码:
.home .scrollTip{position: relative;}
.home .scrollTip.animate{animation: ani 800ms;}
@keyframes ani{
    0% {opacity:1; bottom:0;}
    100% {opacity:0; bottom:-40px;}
}
    2、js代码
//获取dom节点
var scrollTip = document.querySelector('.scrollTip');
//页面载入时,给它执行一次
scrollTip.classList.add('animate');
//监听动画是否结束
scrollTip.addEventListener('animationend',function(){
 //动画结束,移除动画的样式类
 scrollTip.classList.remove('animate');
 //延时1秒,再将动画加入
 setTimeout(function(){
 scrollTip.classList.add('animate');
 },1000)
})