Image Gallery Endless Loop

JS + CSS3

HTML

<div id="container">
<ul id="gallery">
<li><img src="http://dummyimage.com/120x120/f068f0/fff" alt=""></li>
<li><img src="http://dummyimage.com/120x120/8469f0/fff" alt=""></li>
<li><img src="http://dummyimage.com/120x120/69c5f0/fff" alt=""></li>
<li><img src="http://dummyimage.com/120x120/69f0c5/fff" alt=""></li>
<li><img src="http://dummyimage.com/120x120/69f069/fff" alt=""></li>
<li><img src="http://dummyimage.com/120x120/f0dc69/fff" alt=""></li>
<li><img src="http://dummyimage.com/120x120/f0dc69/fff" alt=""></li>
</ul>
</div>

CSS

* {
    margin: 0;
    padding: 0;
    list-style: none;
}
body {
    overflow:
}
#container {
    width: 100%;
    overflow: hidden;
    height: 120px;
    position: relative;
}
#gallery {
    width: 3000px;
    height: 120px;
    position: absolute;
    -webkit-animation: scroll 10s linear infinite;
    -moz-animation: scroll 10s linear infinite;
    -o-animation: scroll 10s linear infinite;
    animation: scroll 10s linear infinite;
}
#gallery:hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}
#gallery:after {
    content: '';
    display: table;
    clear: both;
}
#gallery li {
    float: left;
    padding-right: 10px;
}

JavaScript

$(function() {
    
    var clone = $('#gallery li').clone(),
        clone2 = $('#gallery li').clone();
    console.log(clone);

    $('#gallery').append(clone, clone2);
});