要实现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)
})
