xxxxxxxxxx
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: aqua;
height: fit-content;
width: 500px;
overflow-x: hidden;
position: relative;
}
.anim {
animation: anim 30s infinite linear;
display: flex;
}
.anim > .box {
width: 90px;
height: 90px;
margin: 5px;
background-color: blue;
flex-shrink: 0;
}
.container > button {
position: absolute;
left: 0px;
top: 32px;
width: 50px;
}
@keyframes anim {
to {
transform: translateX(-1000px);
}
}
xxxxxxxxxx
<div class="container">
<div class="anim">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<button onclick="nextBox()">next box</button>
</div>