html动画效果停顿几秒,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)

})