I have a dilemma with displaying my logo images. I have more than 10 logos, but I want to showcase only 6 of them on page load. The rest of the logos should slide horizontally from right to left in an infinite loop.
Can anyone assist me with creating keyframes and CSS for this effect?
I came across an example at https://codepen.io/mdashikar/pen/VWPvgE but it's not exactly what I need. In that example, the image slides from right to left, pauses for a few seconds, and then repeats. However, I require the image to slide continuously without interruption.
.logo_slider {}
.logo_slider ul {
margin: 0;
padding: 0;
list-style: none;
}
.logo_slider ul li {
display: inline-block;
border: 1px solid #ccc;
margin: 20px;
width: 80px;
height: 80px;
border-radius: 50%;
}
.logo_slider ul li a img {
width: 100%;
-webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
animation: mymove 5s infinite;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
from { right: 0px; }
to { left: 200px; }
}
/* Standard syntax */
@keyframes mymove {
from { right:0px; }
to { left: 200px; }
}<div class="logo_slider">
<ul>
<li><a href=""><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"></a></li>
<li><a href=""><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"></a></li>
<li><a href=""><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"></a></li>
<li><a href=""><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"></a></li>
</ul>
</div>