title: How to make objects move with CSS?
body: <p>I have two images (objects) set side by side in the middle of the page and I want them to move toward each other as if they are going to collide and stop as they are placed beside each one.</p>
  
  <p>So, for the object at the right side I have written the following code, thinking that the object should move from left to right, but the result is far from what I expect. Is it possible to do it by transition? what I want is that one of the objects start moving from left side and the other start moving from the right and meet at the center as if they want to collide.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.one {
    border: 3px solid #73AD21;
    position: absolute;
  }
  .two {
    top: 45%;
    left: 44%;
  }
  .left1,
  .right2 {
    float: left;
  }
  #axis:hover .move-right {
    transform: translate(-350px, 0);
    -webkit-transform: translate(-350px, 0);
    -o-transform: translate(-350px, 0);
    -moz-transform: translate(-350px, 0);
  }
  .object1 {
    position: absolute;
    transition: all 2s ease-in;
    -webkit-transition: all 2s ease-in;
    -moz-transition: all 2s ease-in;
    -o-transition: all 2s ease-in;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="axis" class="one two"&gt;
    &lt;img class="object1 left1 move-right" src="http://placehold.it/50x50" /&gt;
    &lt;img class="object2 right2 move-left" src="http://placehold.it/75x75" /&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>