CSS-only infinite scrolling carousel animation

Introduction#

We love JavaScript, of course. But it's always fun to see what we can achieve with CSS alone - especially when it comes to animations, since CSS animations are often "less heavy" than JavaScript animations.

In this post, I'll show you how to create an infinite scrolling carousel animation with pause on hover effect using only CSS. Here's a preview of what we'll be building:

Create a row of cards#

First, let's create the basic structure of our carousel. Consider a row of cards:

Looks good, right? The cards can be your fancy banners, product images, or anything you want to showcase in your carousel.

Duplicate the cards#

Since we want the carousel to be infinite, it should be connected end-to-end. Instinctively, we can try to repeat the cards:

Check out the result:

Only the first set of cards is visible. If you check the HTML, you'll see that the second set of cards is hidden and follows the first set.

Animate the carousel#

Time to animate the carousel! Since we have two sets of cards connected, we can animate the carousel by transforming the card groups. Here's how:

We still have one last touch to add: pausing the animation when hovering over the carousel. This will give users a chance to see the content more clearly. Since we have two sets of cards, we need to pause both groups when hovering over the carousel:

That's it! 🎊 Now the carousel will pause when you hover over it.

Final thoughts#

CSS is powerful, and it's always fun to explore what we can achieve with it. There are also other CSS properties like scroll-snap-type and scroll-snap-align that can help you create an interactive carousel. Happy coding! 🚀