DEV Community

Cover image for Create an infinite scrolling animation with CSS 💥
Avneesh Agarwal
Avneesh Agarwal

Posted on • Edited on • Originally published at blog.avneesh.tech

Create an infinite scrolling animation with CSS 💥

#animation #css #webdev

You might have seen an infinite autoscrolling animation on a website with some logos. This scrolling animation looks really good. So let's see how we can do that

Let's do it

Creating a container with 6 divs inside it

<div class="container"> <div class="pink"></div> <div class="blue"></div> <div class="yellow"></div> <div class="orange"></div> <div class="purple"></div> <div class="aqua"></div> </div>
Enter fullscreen mode Exit fullscreen mode

Adding simple styles to the container and giving the divs a width, height, and different colors. You can also have images here.

.container { overflow: hidden; display: flex; height: 500px; width: 1500px; margin: 0 auto; } .container div { height: 400px; min-width: 300px; margin-left: 100px; } .pink { background-color: pink; } .blue { background-color: blue; } .yellow { background-color: yellow; } .orange { background-color: orange; } .purple { background-color: purple; } .aqua { background-color: aqua; }
Enter fullscreen mode Exit fullscreen mode

Adding a keyframe -

@keyframes slide { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-1500px, 0, 0); /* The image width */ } }
Enter fullscreen mode Exit fullscreen mode

Using the keyframe animation in the container

.container div { height: 400px; min-width: 300px; margin-left: 100px; animation: slide 15s linear infinite; }
Enter fullscreen mode Exit fullscreen mode

Ta-da it was as simple as this to get it working!

https://www.loom.com/share/a2339e51fcf942a99de46264190e3c94

Hope you liked this mini-tutorial, I will meet you in the next one ✌🏻

Useful links-

Code

Social links

Top comments (3)

Collapse
 
avinaba_mazumdar profile image
Avinaba Mazumdar •

how to wrap around?

Collapse
 
ordinz profile image
Ordin •

Nice! Thank you!

Collapse
 
fire_blazer__ profile image
Ravi Malvia •

is there any difference between .container and .container div?