Implementing an Infinite 3D Carousel Animation with Pure CSS

This article demonstrates how to create a smooth, infinite 3D carousel effect using only CSS, avoiding the heavier Vue transition component.

1. Core Idea – All carousel items share the same motion path. By assigning each item a different negative animation delay, the items are staggered to form a continuous loop.

2. CSS Keyframes – The animation consists of six keyframes that control translate and scale values. Adding duplicate keyframes (e.g., at 6.67% before 16.67%) creates a pause between movements.

.item {
  animation: slide 12s infinite;
}
@keyframes slide {
  0%,100% { transform: translate(0%,0%) scale(1); }
  16.67% { transform: translate(120%,-30%) scale(0.9); }
  33.33% { transform: translate(100%,-70%) scale(0.8); }
  50% { transform: translate(0,-90%) scale(0.7); }
  66.67% { transform: translate(-100%,-70%) scale(0.8); }
  83.33% { transform: translate(-120%,-30%) scale(0.9); }
}

To add a pause, duplicate each keyframe with a small offset (e.g., 6.67%).

@keyframes slide {
  0%,90%,100% { transform: translate(0%,0%) scale(1); }
  6.67%,16.67% { transform: translate(120%,-30%) scale(0.9); }
  23.33%,33.33% { transform: translate(100%,-70%) scale(0.8); }
  40%,50% { transform: translate(0,-90%) scale(0.7); }
  56.67%,66.67% { transform: translate(-100%,-70%) scale(0.8); }
  73.33%,83.33% { transform: translate(-120%,-30%) scale(0.9); }
}

3. Using CSS Variables for Negative Delay – Each item receives a custom property --i (its index). The animation delay is calculated as calc(-2s * var(--i)) , causing each item to start at the correct point.

.item {
  animation: slide 12s calc(-2s * var(--i)) infinite;
}

4. Advanced Approach with @property – Define a custom property --index that animates from 0 to 6. This requires browsers that support CSS Typed OM (Safari 16.4+, Chrome 111+). The animation is smoother but has limited compatibility.

@property --index {
  syntax: "
";
  initial-value: 0;
  inherits: false;
}
@keyframes slide {
  0%   { --index: 0; }
  100% { --index: 6; }
}

5. Style Queries with @container style – Match the value of --index to apply different transforms and z‑indexes, achieving the same effect without JavaScript.

@container style(--index: 0) { .item { transform: translate(0,0) scale(1); z-index: 4; } }
@container style(--index: 1) { .item { transform: translate(120%,-30%) scale(0.9); z-index: 3; } }
/* …continue for indices 2‑5… */

6. Compatibility – The pure‑CSS keyframe method works in all modern browsers. The @property and @container style techniques have narrower support (Safari 16.4+, Chrome 111+, Firefox currently unsupported).

7. Additional Tips – Pause the carousel on hover using .wrap:hover .item { animation-play-state: paused; } .

In summary, three implementation strategies are presented, ordered by compatibility: (1) basic keyframes with negative delay (most compatible), (2) using @property for smoother control, and (3) style queries for a more declarative approach.