title: CSS3 Rotate from 0 to 90 then 90 to 180
body: <p>I have an object rotating 360 degrees using CSS3's rotate animation.  However, the code (linked below) rotates the image 360 degrees then repeats the same animation.</p>
  
  <p>I want to rotate it 360 degrees, pause every 90 degress and have infinite rotating.</p>
  
  <p>Any help would be much appreciated.</p>
  
  <p>Thanks</p>
  
  <pre><code>.image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin:-60px 0 0 -60px;
  -webkit-animation:spin 1s ease-in-out infinite;
  -moz-animation:spin 1s linear infinite;
  animation:spin 1s linear infinite;
  }
  @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
  @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
  @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
  </code></pre>
  
  <p>Here is a <a href="http://jsfiddle.net/gionaf/Ugc5g/" rel="nofollow">JSFiddle for the project</a></p>