animation-timeline의 scroll()과 view()를 사용한 CSS 스크롤 애니메이션. 미지원 브라우저에서는 콘텐츠를 정적으로 표시한다.
아래로 스크롤해 보세요. 상단 진행 바와 카드 등장이 전부 CSS입니다.
rise · 떠오름
요소가 스크롤포트에 들어오는 구간(entry) 동안 아래에서 떠오릅니다.
zoom · 확대
작게 시작해 제자리 크기로 자랍니다. 카드 그리드에 잘 어울립니다.
flip · 회전
X축으로 살짝 누워 있다가 정면으로 섭니다.
메인 스레드 밖
animation-timeline은 컴포지터에서 돌아 스크롤이 무거워지지 않습니다.
JS 0줄
IntersectionObserver도 scroll 리스너도 없습니다. CSS가 전부입니다.
폴백 안전
미지원 브라우저에서는 애니메이션만 빠지고 콘텐츠는 정상 표시됩니다.
animation-timeline: scroll() · view()는 지원 브라우저에서만 활성화되고, 그 외엔 정적 표시로 폴백합니다.