Pause in infinitive CSS animation - css

Question

I have created this arrow that bounces and I want to add a pause for like 2 seconds between the bounces. I found a couple of similar examples here but they didn't work for my arrow (changed the bouncing animation).
If i add the following I get a pause but only once:
-webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
animation-delay: 2s;
Anyway, here is the code:
HTML:
<div class="btn-bottom"></div>
CSS:
.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);
}
}
JSFIDDLE:
https://jsfiddle.net/92xmw541/

Answer 1

Easiest way is to make the duration of the animation longer (4s below) and use half of the animation time with the keyframes. The rest of the keyframes the object will be at rest.
.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;
animation: bounce 4s infinite;
}
#keyframes bounce {
10%,
20%,
30%,
40%,
50% {
transform: translateY(0);
}
15% {
transform: translateY(-30px);
}
25% {
transform: translateY(-15px);
}
35% {
transform: translateY(-5px);
}
45% {
transform: translateY(-2px);
}
}
<div class="btn-bottom"></div>

Answer 2

Here is a pure Javascript solution I ended up with to achieve a delay between CSS animations (like animate.css).
function repeatAnimate(element, delay) {
delay = delay || 5000;
setTimeout(function () {
element.style.webkitAnimation = 'none';
setTimeout(function () {
element.style.webkitAnimation = '';
repeatAnimate(element, delay);
}, 10);
}, delay)
}
Usage:
$(function () {
var element = document.getElementsByClassName('btn-play')[0];
repeatAnimate(element, 2000);
});
In this case the animated and bounce classes are already present in the HTML markup.