스태거

Stagger

여러 요소가 동시에 움직이지 않고 순서대로 약간씩 지연되며 움직이는 기법. 리스트나 그리드가 한 번에 나타나는 대신 물결처럼 나타납니다.

다른 이름: Staggered animationSequential delay

···

html

<div class="grid" id="grid"></div>

css

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10%;width:60%;aspect-ratio:1}
.grid i{border-radius:8px;background:var(--accent);opacity:0;transform:translateY(60%);
  animation:pop 2.4s calc(var(--i) * 90ms) infinite}
@keyframes pop{
  0%{opacity:0;transform:translateY(60%)}
  14%{opacity:1;transform:translateY(0)}
  70%{opacity:1;transform:translateY(0)}
  85%{opacity:0;transform:translateY(-30%)}
  100%{opacity:0;transform:translateY(60%)}
}

const grid = document.getElementById('grid');
for (let i = 0; i < 9; i++) {
  const d = document.createElement('i');
  d.style.setProperty('--i', String(i));
  grid.appendChild(d);
}

각 요소의 animation-delay(또는 transition-delay)를 인덱스 × 고정 간격으로 계산해서 줍니다. 간격이 너무 크면 굼떠 보이고, 너무 작으면 스태거가 있는지도 모르게 됩니다. 보통 30~80ms 사이를 씁니다.

카드 그리드, 알림 목록, 온보딩 체크리스트처럼 "여러 개가 한 그룹"임을 알려주는 동시에 화면이 한 번에 뒤바뀌는 부담을 줄여줍니다.

CSS의 animation-delay는 첫 재생에만 적용되지만, 요소마다 값이 다르면 그 위상 차이가 반복 재생에도 계속 유지됩니다 — 그래서 infinite 애니메이션에서도 스태거가 매 루프 반복됩니다.

언제 쓰나

6~12개 정도의 리스트에 씁니다. 수십 개 이상이면 전체 지연 시간이 너무 길어지니 간격을 줄이거나 스태거를 포기하세요.