jQuery-动画停顿循环执行

一个动画效果，执行完后，停顿一段时间，然后又开始执行，重复循环

步骤1： @keyframes先定义好动画：

@-webkit-keyframes diamond {
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}
@keyframes diamond {
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}

步骤2：定义一个类，使用定义的动画

eg:

.animate {
  -webkit-animation: diamond 3s;
  animation: diamond 3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

步骤3：使用js/jquery 控制动画的执行

①先给要使用动画的元素添加- - -使用了动画的类名
②使用 “animationend” 监听 动画是否结束，该事件有个回调函数，在动画执行完成后执行，回调函数里面添加如下逻辑：

1. 移除元素的 “动画类名”
2. 设置 setTimeout 延迟执行方法，setTimeout 里面写 添加元素的 “动画类名”，以及多长时间后添加类名

eg:
这里使用的jQuery：

$('.banner-btn-img').addClass('animate');
$('body').on('animationend webkitAnimationEnd oAnimationEnd', '.banner-btn-img', function () {
  $('.banner-btn-img').removeClass('animate');
    setTimeout(function () {
      $('.banner-btn-img').addClass('animate');
  }, 1000)
})

如果是js:
eg:

var bannerBtn = document.querySelector('.banner-btn');
bannerBtn.classList.add('animate');
bannerBtn.addEventListener('animationend', function() {
  bannerBtn.classList.remove('animate');
  setTimeout(function() {
    bannerBtn.classList.add('animate');
  }, 1000)
})