Infinite icon slider using CSS - html

Question

I have 10 icons and I am scrolling horizontally from right to left.
I am trying to animate icon infinite but at the end of the icon getting the space and it's jumping from one.
I have to remove the space at the end of the icon and slide will continue to start from one without jumping. I mean I need an infinite loop.
Would you help me out in this?
.logo{width: 100%;}
.logo_slider {
overflow: hidden;
width: 752px;
margin: auto;
}
.logo_slider {
overflow: hidden;
}
.logo_slider ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
position: relative;
animation: mymove 10s linear infinite;
}
.logo_slider ul li {
flex-shrink: 0;
flex-grow: 0;
display: block;
border: 1px solid #ccc;
margin: 20px;
width: 80px;
height: 80px;
border-radius: 50%;
}
.logo_slider ul li a img {
width: 100%;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes mymove {
0% { left: 0; }
100% { left: -100%; }
}
/* Standard syntax */
#keyframes mymove {
0% { left: 0; }
100% { left: -100%; }
}
<div class="logo">
<div class="logo_slider">
<ul>
<li><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"></li>
<li><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"></li>
<li><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"></li>
<li><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"></li>
<li><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"></li>
<li><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"></li>
<li><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"></li>
<li><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"></li>
<li><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"></li>
<li><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"></li>
</ul>
</div>
</div>

Answer 1

Codepen demo
The idea is to move the slider by 120px, the amount of pixels necessary to slide just one icon (each list-item is in fact 80px wide plus a margin of 40px). Since the icons are all the same icon the final result will be seamless.
The movement is done with the transform property rather than left for a matter of performance.
Just be sure to add enough images to cover all your different viewports (plus one)
CSS
.logo_slider {
overflow: hidden;
width: 752px;
margin: auto;
}
.logo_slider {
overflow: hidden;
}
.logo_slider ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
animation: mymove 1s linear infinite;
}
.logo_slider ul li {
flex-shrink: 0;
display: block;
border: 1px solid #ccc;
margin: 20px;
width: 80px;
height: 80px;
border-radius: 50%;
box-sizing: border-box;
}
.logo_slider img {
width: 100%;
}
#keyframes mymove {
0% { transform: 0; }
100% { transform: translateX(-120px); }
}
Anyway I would strongly recommend to slide an element with that icon as a repeated background (with the gray border included in the icon itself) instead of using several images.
Here's an example using a background
Codepen demo
With this approach the illusion of the movement is done by setting the width of the inner element (a pseudoelement :before containing the background) to the width of the parent container plus 120px (this is done using the calc() function)
The markup would be simply
<div class="optimizedslider"></div>
and the style
.optimizedslider {
overflow: hidden;
width: 750px;
height: 100px;
margin: auto;
}
.optimizedslider:before {
content: "";
display: block;
background: url(https://url.to/icon.png) repeat-x;
background-size: 120px 100px;
height: 100%;
width: calc(100% + 120px);
animation: mymove 1s linear infinite;
}
#keyframes mymove {
0% { transform: 0; }
100% { transform: translateX(-120px); }
}
Finally, here the icon (240x200) I've used, in case you need it

Answer 2

So, every time an icon moves off of the screen we just remove it completely, nobody can see it anywany. And at the same time we create another one on the other side of the screen so it moves on to the canvas. Change your animation "mymove" with this
#keyframes mymove {
0% { translate: 0; }
100% { transform: translateX(-120px) }
}
120 px is just about the width of one icon in your example. You also need just one icon more than what you want to display. If you want 6 to be displayed leave 7 so that one at the end can create the illusion.