在不定式CSS动画中暂停

我已经创建了这个反弹箭头，我想在两次反弹之间添加一个暂停，大约2秒。我在这里找到了几个类似的例子，但它们不适用于我的箭头（更改了反弹动画）

如果我添加以下内容，我会暂停，但仅暂停一次：

-webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
animation-delay: 2s;

无论如何，代码如下：

HTML:

JSFIDDLE：

---

最简单的方法是延长动画的持续时间（以下为4s），并将一半的动画时间用于关键帧。对象将处于静止状态的其余关键帧

.btn底部{
宽度：48px；
高度：58px；
背景：url（“https://d30y9cdsu7xlg0.cloudfront.net/png/10897-200.png）居中不重复；
背景尺寸：47px；
保证金：自动；
顶部：40px；
左：0；
右：0；
光标：指针；
动画：无限反弹；
}
@关键帧反弹{
10%,
20%,
30%,
40%,
50% {
变换：translateY（0）；
}
15% {
转换：translateY（-30px）；
}
25% {
转换：translateY（-15px）；
}
35% {
transform:translateY（-5px）；
}
45% {
transform:translateY（-2px）；
}
}

---

这里有一个纯Javascript解决方案我最终实现了CSS动画之间的延迟（如animate.CSS）

用法：

$(function () {
    var element = document.getElementsByClassName('btn-play')[0];
    repeatAnimate(element, 2000);
});

在这种情况下，HTML标记中已经存在

动画

和

反弹

类

.btn-bottom{
  width: 48px;
  height: 58px;
  background: url("https://d30y9cdsu7xlg0.cloudfront.net/png/10897-200.png") 
  center center no-repeat;
  background-size: 47px;
  margin: auto;
  top: 40px;
  left: 0;
  right: 0;
  cursor: pointer;
  -webkit-animation: bounce 2.5s infinite;
  animation: bounce 2.5s infinite;
}

@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0); 
    }
    40% {
        -webkit-transform: translateY(-30px); 
    }
    60% {
        -webkit-transform: translateY(-15px); 
    } 
}
@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -moz-transform: translateY(0); 
    }
    40% {
        -moz-transform: translateY(-30px); 
    }
    60% {
        -moz-transform: translateY(-15px); 
    } 
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0); 
    }
    20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0); 
    }
    40% {
        -webkit-transform: translateY(-30px);
        -moz-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        -o-transform: translateY(-30px);
        transform: translateY(-30px); 
    }
    60% {
        -webkit-transform: translateY(-15px);
        -moz-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        -o-transform: translateY(-15px);
        transform: translateY(-15px); 
    } 
}

function repeatAnimate(element, delay) {
    delay = delay || 5000;
    setTimeout(function () {
        element.style.webkitAnimation = 'none';
        setTimeout(function () {
            element.style.webkitAnimation = '';
            repeatAnimate(element, delay);
        }, 10);
    }, delay)
}

$(function () {
    var element = document.getElementsByClassName('btn-play')[0];
    repeatAnimate(element, 2000);
});