모션

스태거 페이드 인

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

#motion
#stagger
#fade
#loop

설치

이 항목은 아직 설치할 수 없어요. 소스를 참고해 주세요. 설치할 수 없는 항목 알아보기

AI 프롬프트

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.

소스

마크다운으로 보기

demo.module.csscss

.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.tsxtsx

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>
  );
}