Délai d'animation CSS en boucle entre

Essayer d'obtenir une étiquette avec la classe de prix pour glisser vers le haut, puis faites glisser vers l'arrière vers le bas avec les CSS.

J'ai le texte suivant --

-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; }
}

Je vois que l'animation commence dans les 4 secondes, mais une fois qu'il commence, juste en continu des boucles de façon rapide. Comment pourrais-je ajouter 4 secondes de délai entre chaque boucle et en arrêt pendant 2 secondes au 50% marque?

source d'informationauteur Yasir