Create an INFINITE CSS Carousel🤖 w/ Negative animation-delay !

The main idea of a Carousel isn't just about moving a bunch of elements from left to right because there must be a smoothly infinite movement, this can be done by duplicating the element, but wouldn't it be a waste of time and resources to do so.

So the best solution would be rather than moving the whole element, we just move each element on a time based manner, all elements will have the animation but each element will have a unique (incremented) index, by which we will delay its start, and if we made this delay negative, we will have a smooth movement without any lagging

adding a will-change will make a separate compositing layer to make the animation run on gpu rather than cpu

below is a demo by which, you can understand the effect

You can reach me (if you had any problems with the effect):

X / twitter "where I post a lot!"

LinkedIn