一個動畫效果，執行完后，停頓一段時間，然后又開始執行，重復循環

步驟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) })