title: CSS: How to make element appear from left of the screen?
body: <p>I have a element which I would like it to animate to the right off the screen and then start from the left off the screen. I want it to dissapear off the screen to the right and appears again coming out from the left of the screen. Is there a way I could go about doing this? Here's what I have so far. With my code, it animates to the right off the screen but then the elements goes backwards to its position point whereas I want it to appear again from the left of the screen. Any help is much appreciated. </p>
  
  <pre><code>    .bus { position:absolute; top: 640px; left: 100px; height:150px; width:290px; z-index: 2; 
      -webkit-animation: myfirst 5s infinite;
      animation: myfirst 5s infinite;
      -webkit-animation-duration: 10s;
      animation-duration: 10s;
  
       animation-direction: normal;
        -webkit-animation-direction: normal;
  
  }
  
      @-webkit-keyframes myfirst {
      0%   {left: 0%;}
  
      50%  {left: 100%;}
  
      100% {left:0%;}
  }
  
  @keyframes myfirst {
      0%   {left: 0%;}
  
      50%  {left: 100%;}
  
      100% {left:0%;}
  }
  </code></pre>