How to create marquee infinite loop of logos slider with css only

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?

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

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%; }
}

<div class="marquee">
  <div>
    <img src="http://static.bragdeal.com/logo.png" alt="">
    <img src="http://static.bragdeal.com/logo.png" alt="">
    <img src="http://static.bragdeal.com/logo.png" alt="">
    <img src="http://static.bragdeal.com/logo.png" alt="">
    <img src="http://static.bragdeal.com/logo.png" alt="">
    <img src="http://static.bragdeal.com/logo.png" alt="">
    <img src="http://static.bragdeal.com/logo.png" alt="">
    <img src="http://static.bragdeal.com/logo.png" alt="">
  </div>
</div>

Solution

HTML:

  <div class='marquee'>
       .... 
       images
       ....
    </div>

CSS:

.marquee {
    width: 100%;
    overflow: hidden;
    border:1px solid #ccc;
}

JavaScript:

$(function () {
    $('.marquee').marquee({
        duration: 5000,
         duplicated: true,
         gap: 00, 
         direction: 'left',
         pauseOnHover: true
    });
});

This is what i have done to make it run using JQuery Marquee.

External links:

Also you can follow this Fiddle