title: CSS animation delay in between loop
body: <p>Trying to get a label with class price to slide up, then slide back down with CSS.</p>
  
  <p>I have the following --</p>
  
  <pre><code>-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; }
  }
  </code></pre>
  
  <p>I am seeing that the animation starts in 4 seconds, but once it starts, just continuously loops in a fast manner. How would I add a 4 second delay in between each loop and stop for a 2 seconds at the 50% mark?</p>