title: Slide in from left CSS animation
body: <p>I would like to make a simple animation, when the page loads, my logo should animate from the left side of the box to the right side. I have tried many versions, but haven't succeeded yet. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
  
  &lt;div&gt;
  &lt;img src="logo.png" alt="logo" style="width:170px;height:120px;"&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>div
  {
   width:640px;
   height:175px;
   background:blue;
   -webkit-transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out;
   -o-transition: all 1s ease-in-out;
   -ms-transition: all 1s ease-in-out;
   position:absolute;
  }
  div img
  {
   -webkit-transform: translate(3em,0);
   -moz-transform: translate(3em,0);
   -o-transform: translate(3em,0);
   -ms-transform: translate(3em,0);
  }
  </code></pre>