title: Smooth Infinite Scrolling Banner [CSS Only]
body: <p>Looking to optimize this infinite scrolling effect, however I'm not entirely sure how to create a smooth transition when looping back to the original image. At 10s it's hardly noticeable, however at 30s it's more evident. I'm assuming it has something to do with the ending position margin, but can't quite pinpoint it. What should the value of the last frame be?</p>
  
  <p><a href="https://jsfiddle.net/wb28eeh2/1/" rel="nofollow">JSFiddle</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="photobanner"&gt;
          &lt;img class="first" src="http://placehold.it/350x150"&gt;
          &lt;img src="http://placehold.it/350x150"&gt;
          &lt;img src="http://placehold.it/350x150"&gt;
          &lt;img src="http://placehold.it/350x150"&gt;
          &lt;img src="http://placehold.it/350x150"&gt;
          &lt;img src="http://placehold.it/350x150"&gt;
          &lt;img src="http://placehold.it/350x150"&gt;
          &lt;img src="http://placehold.it/350x150"&gt;
          &lt;img src="http://placehold.it/350x150"&gt;
          &lt;img src="http://placehold.it/350x150"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
      &lt;div class="photobanner"&gt;
          &lt;img class="second" src="http://placehold.it/350x150"&gt;
          &lt;img src="http://placehold.it/350x150"&gt;
          &lt;img src="http://placehold.it/350x150"&gt;
          &lt;img src="http://placehold.it/350x150"&gt;
          &lt;img src="http://placehold.it/350x150"&gt;
          &lt;img src="http://placehold.it/350x150"&gt;
          &lt;img src="http://placehold.it/350x150"&gt;
          &lt;img src="http://placehold.it/350x150"&gt;
          &lt;img src="http://placehold.it/350x150"&gt;
          &lt;img src="http://placehold.it/350x150"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
      &lt;div class="photobanner"&gt;
          &lt;img class="first" src="http://placehold.it/350x150"&gt;
          &lt;img src="http://placehold.it/350x150"&gt;
          &lt;img src="http://placehold.it/350x150"&gt;
          &lt;img src="http://placehold.it/350x150"&gt;
          &lt;img src="http://placehold.it/350x150"&gt;
          &lt;img src="http://placehold.it/350x150"&gt;
          &lt;img src="http://placehold.it/350x150"&gt;
          &lt;img src="http://placehold.it/350x150"&gt;
          &lt;img src="http://placehold.it/350x150"&gt;
          &lt;img src="http://placehold.it/350x150"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.container {
      width: 100%;
      overflow: hidden;
      margin: 10px auto;
      background: white;
  }
  
  .photobanner, .photobanner2 {
      height: 233px;
      width: 3550px;
  }
  
  .photobanner img, .photobanner2 img {
      padding-right: 10px;
      height: 233px;
      width: 350px;
  }
  
  .photobanner img  {
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
      transition: all 0.5s ease;
  }
  
  .photobanner img:hover {
      -webkit-transform: scale(1.2);
      -moz-transform: scale(1.2);
      -o-transform: scale(1.2);
      -ms-transform: scale(1.2);
      transform: scale(1.2);
      cursor: pointer;
  
      -webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
      -moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
      box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
  }
  /*keyframe animations*/
  .first {
      -webkit-animation: bannermove 30s linear infinite;
         -moz-animation: bannermove 30s linear infinite;
          -ms-animation: bannermove 30s linear infinite;
           -o-animation: bannermove 30s linear infinite;
              animation: bannermove 30s linear infinite;
  }
  
  @keyframes "bannermove" {
   0% {margin-left: 0px;}
   100% {margin-left: -2125px;}
  }
  
  @-moz-keyframes bannermove {
   0% {margin-left: 0px;}
   100% {margin-left: -2125px;}
  }
  
  @-webkit-keyframes "bannermove" {
   0% {margin-left: 0px;}
   100% {margin-left: -2125px;}
  }
  
  @-ms-keyframes "bannermove" {
   0% {margin-left: 0px;}
   100% {margin-left: -2125px;}
  }
  
  @-o-keyframes "bannermove" {
   0% {margin-left: 0px;}
   100% {margin-left: -2125px;}
  }
  
  .second {
      -webkit-animation: bannermoves 30s linear infinite;
         -moz-animation: bannermoves 30s linear infinite;
          -ms-animation: bannermoves 30s linear infinite;
           -o-animation: bannermoves 30s linear infinite;
              animation: bannermoves 30s linear infinite;
  }
  
  @keyframes "bannermoves" {
   0% {margin-left: -2125px;}
   100% {margin-left: 0px;}
  }
  
  @-moz-keyframes bannermoves {
   0% {margin-left: -2125px;}
   100% {margin-left: 0px;}
  }
  
  @-webkit-keyframes "bannermoves" {
   0% {margin-left: -2125px;}
   100% {margin-left: 0px;}
  }
  
  @-ms-keyframes "bannermoves" {
   0% {margin-left: -2125px;}
   100% {margin-left: 0px;}
  }
  
  @-o-keyframes "bannermoves" {
   0% {margin-left: -2125px;}
   100% {margin-left: 0px;}
  }
  </code></pre>