title: css3 animation moving left to right then continue moving from outside to left
body: <p>The red box appeared in the middle of its containter when the page first load then moving from left to right and reappear like this image:</p>
  
  <p><img src="https://i.stack.imgur.com/QsKxp.gif" alt="enter image description here"></p>
  
  <p>Here's what i did so far but it does not suit the idea above:</p>
  
  <pre><code>.box{
      -webkit-animation: left-to-right 10s infinite; /* Chrome, Safari, Opera */
      animation: left-to-right 10s infinite;
  }
  
  /* Chrome, Safari, Opera */
  @-webkit-keyframes left-to-right {
      100%{
          left:-1000px
      }
  }
  
  @keyframes left-to-right {
      100%{
          left:-1000px
      }
  }
  </code></pre>
  
  <p>Page width is 1280px and box width is 1000px.</p>