title: how make a looped animation wait using css3
body: <p><br/>
  I have a css3 animation with the following:</p>
  
  <pre><code>@-webkit-keyframes rotate {
      from {
      -webkit-transform: rotate(0deg);
      }
      to { 
      -webkit-transform: rotate(360deg);
      }
  }
  
  .animated {
  -webkit-animation-name: rotate;
  -webkit-animation-duration: 2.4s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transition-timing-function: ease-in-out;
  }
  </code></pre>
  
  <p>It works flawlessly, well..., I want to make it wait between the loops: <br/>
  <em>animation-start</em>, animation-finish, <strong>wait(about 0.5s)</strong>, <em>animation start</em>, animation end, <strong>wait(about 0.5s)</strong>...</p>
  
  <p>PS: I've tried <code>-webkit-animation-delay</code>, it does not work.</p>
  
  <p>Any help?</p>