Atraso de Animação CSS em Loop Entre - css, animação, atraso

Tentando fazer com que um rótulo com preço de classe deslize para cima e deslize novamente com CSS.

Eu tenho o seguinte -

-webkit-animation-name: slidingPrice;
-webkit-animation-duration: 300ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-delay: 4s;

@-webkit-keyframes slidingPrice {
0% { opacity: 0; bottom: -30px; }
50% { opacity: 1; bottom: 0; }
100% { opacity: 0; bottom: -30px; }
}

Estou vendo que a animação começa em 4segundos, mas, uma vez iniciado, faz um loop contínuo e rápido. Como eu adicionaria um atraso de 4 segundos entre cada loop e pararia por 2 segundos na marca de 50%?

Respostas:

Faça seu loop mais longo e adicione mais quadros-chave.

@-webkit-keyframes slidingPrice {
0%     { opacity: 0; bottom: -30px; } /* 0ms initial values */
2.38%  { opacity: 1; bottom: 0; }     /* 150ms half of animation */
34.13% { opacity: 1; bottom: 0; }     /* 2150ms still at half of animation */
36.51% { opacity: 0; bottom: -30px; } /* 2300ms back to initial */
100%   { opacity: 0; bottom: -30px; } /* 6300ms still at initial */
}

.price {
-webkit-animation-name: slidingPrice;
-webkit-animation-duration: 6300ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-delay: 4s;
}