Skip to content
Infinite loop CSS
html
<div class="infinite-loop">
<div class="loop-track">
<img src="icon1.svg" alt="">
<img src="icon2.svg" alt="">
<img src="icon3.svg" alt="">
<img src="icon4.svg" alt="">
<img src="icon5.svg" alt="">
<!-- Duplicate the same icons to create the loop -->
<img src="icon1.svg" alt="">
<img src="icon2.svg" alt="">
<img src="icon3.svg" alt="">
<img src="icon4.svg" alt="">
<img src="icon5.svg" alt="">
</div>
</div>
css
.infinite-loop {
overflow: hidden;
white-space: nowrap;
width: 100%;
}
.loop-track {
display: inline-block;
animation: scrollLoop 20s linear infinite;
}
.loop-track img {
width: 60px; /* or whatever you need */
margin: 0 1rem;
display: inline-block;
vertical-align: middle;
}
@keyframes scrollLoop {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.