CSS Carousel - Animated Loop

This automatically animated loop, likely for logos or testimonials, does require dupe HTML, but the animation and looping is all CSS, no JS required.

Demo
HTML
CSS
JS
Baseline
CodePen

Demo

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Slide 11
Slide 12

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Slide 11
Slide 12

HTML

<!-- Requires a wrapper element -->
<div class="css-carousel">
  <ul>
    <li>Slide 1</li>
    <li>Slide 2</li>
    <li>Slide 3</li>
    <li>Slide 4</li>
    <li>Slide 5</li>
    <li>Slide 6</li>
    <li>Slide 7</li>
    <li>Slide 8</li>
    <li>Slide 9</li>
    <li>Slide 10</li>
    <li>Slide 11</li>
    <li>Slide 12</li>
  </ul>
  <!-- Requires duplicate slides, adding `aria-hidden` to prevent dupe announcement -->
  <ul aria-hidden>
    <li>Slide 1</li>
    <li>Slide 2</li>
    <li>Slide 3</li>
    <li>Slide 4</li>
    <li>Slide 5</li>
    <li>Slide 6</li>
    <li>Slide 7</li>
    <li>Slide 8</li>
    <li>Slide 9</li>
    <li>Slide 10</li>
    <li>Slide 11</li>
    <li>Slide 12</li>
  </ul>
</div>

CSS

/** Requires wrapper element to control overflow **/
.css-carousel {
	/* Optionally remove the scrollbar */
	scrollbar-width: none;
	/* Setup basic Carousel */
	display: flex;
	overflow-inline: auto;
	/* Prevent accidental page Back/Forward */
	overscroll-behavior-inline: contain;
	/* Confine the scrolling direction */
	scroll-snap-type: inline mandatory;
	/* Be nice to others */
	@media (prefers-reduced-motion: no-preference) { 
		/* Makes the sliding a little smoother */
		scroll-behavior: smooth;
	}
	/** Both ULs should be `flex` and have animation **/
	ul {
    /* Some resets, because I am using a `ul` */
  	list-style: none;
  	padding: 0;
	  display: flex;
	  /* Be nice to others */
	  @media (prefers-reduced-motion: no-preference) { 
		  animation: animated-loop 20s linear infinite;
	  }
	}
	li {
		/* To make this a little more appealing */
		aspect-ratio: 1 / 1;
		min-width: 10vw;
		outline: 1px solid;
    place-content: center;
    text-align: center;
	}
}

/* Create the animation for the loop effect */
/** Note that iOS (currently) needs the GPU activation from translate3d **/
@keyframes animated-loop {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-100%, 0, 0); }
}

JS

No JS required.

Baseline

[`scroll-behavior`](https://webstatus.dev/features/scroll-behavior)

[`scroll-snap`](https://webstatus.dev/features/scroll-snap)

CodePen

See the Pen on CodePen.