title: How to create marquee infinite loop of logos slider with css only
body: <p>Right now my code makes the logos animate from right to left and once it hits the end, it restarts. How can I make it continue in a loop so that the first logo follows the last one when a new cycle starts?</p>
  
  <p>EDIT:
  I rather not use extra js libraries, so if there is a simple way of doing this with jquery that would be much better</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>img {
    width: 100px;
  }
  .marquee {
    position: relative;
    width: 100%;
    height: 100px;
    border: 1px solid black;
    overflow: hidden;
  }
  .marquee div {
    display: block;
    position: absolute;
    width: 300%;
    overflow: hidden;
    animation: marquee 20s linear infinite;
  }
  .marquee div:hover {
    animation-play-state: paused;
  }
  .marquee span {
    float: left;
    width: 50%;
  }
  
  @keyframes marquee {
    0% { left: 0; }
    100% { left: -100%; }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="marquee"&gt;
    &lt;div&gt;
      &lt;img src="http://static.bragdeal.com/logo.png" alt=""&gt;
      &lt;img src="http://static.bragdeal.com/logo.png" alt=""&gt;
      &lt;img src="http://static.bragdeal.com/logo.png" alt=""&gt;
      &lt;img src="http://static.bragdeal.com/logo.png" alt=""&gt;
      &lt;img src="http://static.bragdeal.com/logo.png" alt=""&gt;
      &lt;img src="http://static.bragdeal.com/logo.png" alt=""&gt;
      &lt;img src="http://static.bragdeal.com/logo.png" alt=""&gt;
      &lt;img src="http://static.bragdeal.com/logo.png" alt=""&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>