title: Separate properties for different animations on same object
body: <p>I am trying to move two wheel images towards each other using the following code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;  
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;img class="leftwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/&gt;
    &lt;img class="rightwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/&gt;  
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body{
  background:#fff;
  }
  body &gt; img{
  width:200px;
  }
  
  .leftwheel {
      float:left;    
      -webkit-animation: rotationLeft 2s infinite linear;
      animation: rotationLeft 2s infinite linear;
    -moz-animation: rotationLeft 2s infinite linear;
  }
  @-webkit-keyframes rotationLeft {
      from {-webkit-transform: rotate(0deg);}
      to   {-webkit-transform: rotate(359deg);margin-left:25%;}
  }
  @-moz-keyframes rotationLeft {
      from {-moz-transform: rotate(0deg);}
      to   {-moz-transform: rotate(359deg);margin-left:25%;}
  }
  @keyframes rotationLeft {
      from {transform: rotate(0deg);}
      to   {transform: rotate(359deg);margin-left:25%;}
  }
  
  .rightwheel {
      float:right;
      -webkit-animation: rotationRight 2s infinite linear;
      animation: rotationRight 2s infinite linear;
    -moz-animation: rotationRight 2s infinite linear;
  }
  @-webkit-keyframes rotationRight {
      from {-webkit-transform: rotate(0deg);}
      to   {-webkit-transform: rotate(-359deg);margin-right:25%;}
  }
  @-moz-keyframes rotationRight {
      from {-moz-transform: rotate(0deg);}
      to   {-moz-transform: rotate(-359deg);margin-right:25%;}
  }
  @keyframes rotationRight {
      from {transform: rotate(0deg);}
      to   {transform: rotate(-359deg);margin-right:25%;}
  }
  </code></pre>
  
  <p><strong><a href="http://jsfiddle.net/4Hd7D/1/" rel="nofollow">DEMO</a></strong></p>
  
  <p>Now the problem is, I want both the wheels to move towards each other, meet(collide) at the center and the movement should stop while the rotation still continues. But I have set the animation repeat as infinite since i want infinite rotation of the wheel. Can I achieve what I want just by using CSS? If not what are the javascript alternatives? Also how can I set one animation to repeat and other to happen only once in CSS?</p>