CSS만으로 스크롤 기반 애니메이션 구현하기
이 글은 JavaScript 없이 순수 CSS만으로 스크롤에 반응하는 애니메이션을 만드는 방법을 설명합니다. Safari 26 베타에서 지원되는 새로운 기능입니다.
핵심 구성 요소:
- 타겟: 애니메이션할 요소
- 키프레임: 스크롤 시 발생할 애니메이션 효과
- 타임라인: 애니메이션 진행을 결정하는 기준
두 가지 타임라인 유형:
scroll(): 스크롤 시작과 함께 애니메이션 시작 (예: 진행률 바)view(): 요소가 뷰포트에 나타날 때 애니메이션 시작 (예: 이미지 슬라이드 인)
주요 속성들:
animation-timeline: 새로운 타임라인 설정animation-range: 애니메이션 시작/종료 시점 조절 (기본값: 0%-100%)
접근성 고려사항: 모션에 민감한 사용자를 위해 @media not (prefers-reduced-motion) 쿼리로 애니메이션을 감싸는 것을 권장합니다.
이 기술로 복잡한 라이브러리 없이도 부드러운 스크롤 기반 인터랙션을 구현할 수 있습니다.