I've designed a creative way to achieve infinite horizontal scrolling using CSS animation, and my goal is to make the first element in the list stick in place.
Everything works smoothly when I utilize the left property within the @keyframes. However, things don't go as planned when I switch over to using the transform: translateX property.
The rationale behind this shift to the transform property includes:
- Improving browser performance
- Addressing the issue of elements flickering within real-time scenarios (where there's a more complex structure inside
.card), which should ideally be resolved by updating the code to incorporate thetransformproperty.
Could someone offer a solution for this situation utilizing the transform property?
.container {
display: flex;
overflow: hidden;
}
.scroller {
display: flex;
position: relative;
animation: autoScroll 10s linear infinite;
}
.card {
padding: 10px;
margin: 0 10px;
width: 70px;
background: lightblue;
}
.sticky-el {
width: 100px;
background: cyan;
position: sticky;
left: 0;
}
@keyframes autoScroll {
0% {
transform: translateX(0);
//left: 0;
}
100% {
transform: translateX(-100%);
//left: -100%;
}
}<div class="container">
<div class="scroller">
<div class="card sticky-el">Sticky 1</div>
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
</div>
<div class="scroller">
<div class="card sticky-el">Sticky 2</div>
<div class="card">Card 21</div>
<div class="card">Card 22</div>
<div class="card">Card 23</div>
</div>
</div>