ARTICLE AD BOX
I'm trying to create a simple infinite horizontal carousel using pure CSS.
The idea is to duplicate the content and translate it continuously so the loop appears seamless.
It works correctly in Chrome, but in Firefox the second group overlaps the first one during the animation (for example the second 1 2 3 appears on top of 4 5 6 from the first group).
body {
background: #444;
margin: 0;
}
.carousel {
width: 90%;
margin: 100px auto;
border: 5px solid red;
display: flex;
overflow: hidden;
}
.group {
display: flex;
gap: 1em;
flex: 0 0 auto;
width: max-content;
animation: spin 5s linear infinite;
}
.card {
flex: 0 0 5em;
height: 5em;
display: grid;
place-items: center;
background: cornflowerblue;
font-size: 3rem;
border-radius: .2em;
}
@keyframes spin {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
<div class="carousel">
<div class="group">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
<div class="card">6</div>
</div>
<div class="group" aria-hidden="true">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
<div class="card">6</div>
</div>
</div>
