순차 등장 (Stagger)

CSSComposite
전체 목록
  • 김하늘님이 참여했습니다
  • 이서준님이 참여했습니다
  • 박지우님이 참여했습니다
마우스를 올리면 재생

모든 항목에 같은 등장 효과를 주고, 시작 시간만 "순번 × 간격"만큼 늦춥니다. 순번은 최신 브라우저에서는 CSS의 sibling-index()가 직접 세고, 그렇지 않은 브라우저에서는 HTML에 넣은 --i 값을 씁니다. sibling-index()를 지원하는 브라우저가 충분히 많아지면 --i는 지워도 됩니다.

값 조정

바꾼 값은 아래 코드에 바로 반영됩니다.

애니메이션 속성
transform, opacity
렌더링 비용
Composite