DEV Community

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

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

Create an infinite scrolling animation with CSS 💥

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?