Steps easing comparison

@keyframes slide {
  to { transform: translateX(100%); }
}

/* Stepped — 4 discrete jumps */
.steps-4 {
  animation: slide 2s steps(4) infinite alternate;
}

/* Stepped — 8 discrete jumps */
.steps-8 {
  animation: slide 2s steps(8) infinite alternate;
}

/* Stepped — 12 discrete jumps */
.steps-12 {
  animation: slide 2s steps(12) infinite alternate;
}

/* Single jump at start and end */
.steps-jump-both {
  animation: slide 2s steps(1, jump-both) infinite alternate;
}

/* Smooth linear for comparison */
.linear {
  animation: slide 2s linear infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .steps-4,
  .steps-8,
  .steps-12,
  .steps-jump-both,
  .linear {
    animation: none;
  }
}

You are a senior frontend engineer building a CSS animation demo page.

Goal: A side-by-side visual comparison of CSS steps() easing values — no JavaScript.

Technical constraints:
- Use @keyframes with transform: translateX(100%) for the sliding motion.
- Show at least 4 steps() variants: steps(4), steps(8), steps(12), steps(1, jump-both).
- Include a linear variant as a baseline comparison.
- Label each row clearly with the timing function used.
- Use oklch() for all colors, not hex or rgba().
- Include @media (prefers-reduced-motion: reduce) to pause all animations.

Framework variant (pick one):
A) Vanilla CSS with modifier classes (.steps-4, .steps-8, etc.) applied to a shared element.
B) React component — render rows dynamically from an array of timing function strings.

Edge cases to handle:
- Bars must not overflow their track container (use overflow: hidden on the track).
- Animation should alternate (forward and back) to loop visibly without a jump cut.
- steps(1, jump-both) jumps at both 0% and 100% — make this visually apparent.

Return HTML and CSS.