# 스태거 페이드 인

항목이 순서대로 떠올랐다 사라지는 반복 모션

- Type: motion
- Theme: base
- Tags: motion, stagger, fade, loop
- English title: Stagger Fade In
- URL: https://dsui.vercel.app/items/stagger-fade-in

## AI prompt

```text
Animate a list with a looping CSS keyframe (opacity 0→1, translateY 16px→0) and animation-delay: calc(var(--i) * 120ms). Respect prefers-reduced-motion.
```

## Source

### demo.module.css

```css
.stage {
  min-height: 100vh;
  display: grid;
  place-content: center;
  gap: 12px;
  padding: 24px;
}

.item {
  width: min(360px, 80vw);
  padding: 16px;
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-surface);
  animation: loop 3000ms var(--ds-ease-out) infinite both;
  animation-delay: calc(var(--i) * 120ms);
}

@keyframes loop {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  20%,
  70% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translateY(-8px);
  }
}

```

### demo.tsx

```tsx
import type { CSSProperties } from "react";
import styles from "./demo.module.css";

const LABELS = ["Design", "Motion", "Shader", "Theme", "Ship"];

export default function Demo() {
  return (
    <div className={styles.stage}>
      {LABELS.map((label, index) => (
        <div key={label} data-testid="stagger-item" className={styles.item} style={{ "--i": index } as CSSProperties}>
          {label}
        </div>
      ))}
    </div>
  );
}

```