Css карусель, бесконечная прокрутка без рывков при цикле ⇐ CSS

[Anonymous]

I have this code of the carousel. issue is that when it reaches the end of the loop it jerks and then starts. is there way that we can loop start without noticing? here is my code. i don't want to use js. i there a way we can do that? i don't want to make changes when screen size changes. just want .marquee-item to be at 580px.

.marquee-wrapper{ background:#2F394C; text-align:center; } .marquee-wrapper .container{ overflow:hidden; } .marquee-inner span{ display:flex; gap:40px; } .marquee-wrapper .marquee-block{ --total-marquee-items:5; height: 150px; width: calc(30% * (var(--total-marquee-items))); overflow: hidden; box-sizing: border-box; position: relative; margin: 20px auto; background:#1B2531; padding: 30px 0; } .marquee-inner{ display: flex; width: 200%; position: absolute; } .marquee-item{ width: 580px; height: auto; float: left; transition: all .2s ease-out; background:#00cc00; } .marquee-item:last-child { margin: 0 50px 0 20px; } .marquee-inner p{ font-weight: 800; font-size: 30px; font-family: cursive; } .marquee-inner.to-left{ animation: marqueeLeft 5s linear infinite; } .marquee-inner.to-right{ animation: marqueeRight 5s linear infinite; } @keyframes marqueeLeft{ 0% { left: 0; } 100% { left: -100%; } } @keyframes marqueeRight{ 0% { left: -100%; } 100% { left: 0; } } CSS Carousel 1

2

3

4

5

1

2

3

4

5

5

4

3

2

1

5

4

3

2

1


Источник: https://stackoverflow.com/questions/781 ... -when-loop