CSS-only infinite scrolling carousel animation

Create an infinite scrolling carousel animation with pause on hover using only CSS. No JavaScript required.

Gao

Founder

8/11/20243 min read

Stop wasting weeks on user auth

Launch secure apps faster with Logto. Integrate user auth in minutes, and focus on your core product.

Get started

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! 🚀

Introduction#

Create a row of cards#

Duplicate the cards#

Animate the carousel#

Final thoughts#

Introduction#

Create a row of cards#

Duplicate the cards#

Animate the carousel#

Final thoughts#

Introduction

Create a row of cards

Duplicate the cards

Animate the carousel

Final thoughts

Introduction

Create a row of cards

Duplicate the cards

Animate the carousel

Final thoughts