title: Add a pause between loops of an animation
body: <p>I've got this animation that I want to add a pause in between its loops / iterations. I've tried doing it with <code>animation-delay</code> but that of course only applies for the first iteration. Now I've set the animation to take up 3s to make it a bit slower and not spam as much but It would be neat with a pause in between. Any ideas on how to best achieve this?</p>
  
  <p>This is the code:</p>
  
  <pre><code>.--bounce {
          -moz-animation: bounce 3s infinite;
          -webkit-animation: bounce 3s infinite;
          animation: bounce 3s infinite;
      }
  
      @keyframes bounce {
          0%, 20%, 50%, 80%, 100% {
              transform: translateY(0);
          }
  
          40% {
              transform: translateY(-30px);
          }
  
          60% {
              transform: translateY(-15px);
          }
      }
  </code></pre>