Fade crossfade auto-rotating

Slideshow that fades through images on a timer. Pure CSS, set-and-forget. The "ambient" carousel for hero backgrounds.

Live demo

How it works

Four slides absolutely stacked. Each one runs the same @keyframes animation, but with a staggered animation-delay. The keyframe holds opacity at 0 for most of the cycle, fades up at one moment in the loop, holds at 1, fades back to 0. With 4 slides and a 16s cycle, each slide is visible for ~4 seconds. To add or remove slides, change the cycle duration and the delay offsets so the visible windows tile evenly.

Always include the prefers-reduced-motion fallback. The user who turns motion off shouldn't see a frozen black box.

The code (HTML)

<div class="fade">
  <div class="slide">Villa 1</div>
  <div class="slide">Villa 2</div>
  <div class="slide">Villa 3</div>
  <div class="slide">Villa 4</div>
</div>

The code (CSS — the key bits)

.fade .slide {
  position: absolute; inset: 0;
  opacity: 0;
  animation: cycle 16s infinite;
}
.fade .slide:nth-child(1) { animation-delay:  0s; }
.fade .slide:nth-child(2) { animation-delay:  4s; }
.fade .slide:nth-child(3) { animation-delay:  8s; }
.fade .slide:nth-child(4) { animation-delay: 12s; }

@keyframes cycle {
  0%, 22%, 100% { opacity: 0; }
  3%, 19%       { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .fade .slide { animation: none; }
  .fade .slide:nth-child(1) { opacity: 1; }
}

Variants worth considering

Ken Burns effect — add a slow transform: scale(1) → scale(1.1) to each slide's keyframe. Subtle zoom, gives the photos cinematic life. Great for hero backgrounds.

Slower cadence — 6–8 seconds per slide reads as "premium / contemplative." 2–3 seconds reads as "frantic." Default 4 is the safe middle.

Pair with hero text — overlay a stationary headline + CTA. The rotating background works because the foreground doesn't move. Don't rotate text and background together.

Compatibility: animation and @keyframes are universal. Reduced-motion respected.