一个动画结果，实行完后，进展一段工夫，然后又开端实行，反复循环

步调1： @keyframes先界说好动画：

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

步调2：界说一个类，利用界说的动画

.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 内里写 添加元素的 “动画类名”，以及多永劫间后添加类名

$('.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) })