스태거 애니메이션의 전체 길이 계산
스태거(순차) 애니메이션은 목록이나 카드 여러 개를 일정한 간격으로 차례차례 움직이는 방식입니다. 간격을 조금만 늘려도 요소 수에 비례해 전체 길이가 길어지므로, 마지막 요소가 언제 끝나는지 미리 계산해 두는 편이 안전합니다. 요소 수와 간격, 요소 하나의 애니메이션 길이를 넣으면 요소별 시작·종료 시각과 전체 길이가 바로 나옵니다.
계산 방식
k번째 요소의 시작 = 첫 요소 지연 + (k − 1) × 간격, 종료 = 시작 + 애니메이션 길이이며, 전체 길이는 마지막 요소의 종료 시각입니다. 동시에 움직이는 요소 수는 길이 ÷ 간격의 내림에 1을 더해 구합니다. 2026년 10월 기준 W3C 명세와 웹 접근성 지침은 스태거 간격의 권장 ms 값을 정하지 않으므로 이 도구는 값을 제안하지 않습니다.
한계
이징 곡선, 렌더링 비용, 요소가 화면에 들어오는 시점에 따른 지연은 계산에 넣지 않습니다. 또한 간격이 적절한지 판정하지 않습니다. 요소가 많을수록 전체 길이가 길어져 조작을 기다리게 되므로, prefers-reduced-motion 을 존중해 순차 효과를 끄는 경로를 함께 두세요.
자주 묻는 질문
공인된 권장 간격이 없어 이 도구는 값을 제시하지 않습니다. 직접 정한 간격을 넣으면 전체 길이와 동시에 움직이는 요소 수가 바로 나오므로 그 수치를 보고 조정하세요.
요소가 서로 겹치지 않고 하나씩 재생되며, 간격과 길이의 차이만큼 빈 시간이 생깁니다. 결과 안내문에 겹침 여부가 표시됩니다.
각 요소에 0부터 세는 번호를 --i 사용자 지정 속성으로 넣어 두면 그대로 동작합니다. nth-child 로 쓸 때는 표의 시작 시각을 각 요소의 animation-delay 에 넣으세요.