title: CSS3 Slide Out Animation on Page Load
body: <p>I am trying to get an image to slide out to the left when the page loads using purely CSS.</p>
  
  <p>So, far I've got: <a href="http://jsfiddle.net/o7thwd/qZbhJ/" rel="nofollow">http://jsfiddle.net/o7thwd/qZbhJ/</a> and it seems to work.  The issue I can't seem to get over is how the image comes back into view once the animation is over.</p>
  
  <pre><code>#slide {
      left:0;
      width:268px;    
      -moz-animation-name: slideOut;
      -moz-animation-iteration-count: once;
      -moz-animation-timing-function: ease-out;
      -moz-animation-duration: 1.5s;
      -webkit-animation-name: slideOut;
      -webkit-animation-iteration-count: once;
      -webkit-animation-timing-function: ease-out;
      -webkit-animation-duration: 1.5s;
      -o-animation-name: slideOut;
      -o-animation-iteration-count: once;
      -o-animation-timing-function: ease-out;
      -o-animation-duration: 1.5s;
      animation-name: slideOut;
      animation-iteration-count: once;
      animation-timing-function: ease-out;
      animation-duration: 1.5s; 
  }
  @-o-keyframes slideOut {
      0% {
          margin-left: 0;
      }
      100% {
          margin-left: -268px;
      }
  }
  @keyframes slideOut {
      0% {
          margin-left: 0;
      }
      100% {
          margin-left: -268px;
      }
  }
  @-moz-keyframes slideOut {
      0% {
          margin-left: 0;
      }
      100% {
          margin-left: -268px;
      }
  }
  @-webkit-keyframes slideOut {
      0% {
          margin-left: 0;
      }
      100% {
          margin-left: -268px;
      }
  }
  </code></pre>
  
  <p>How can I get it to stay folded to the left like it does on initial page load?</p>