CSS만으로 구현하는 Scroll-driven Animation 가이드
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- *프론트엔드 개발자** (CSS 애니메이션 구현에 관심 있는 자바스크립트 사용자 제외)
- *난이도**: 중급 (CSS 애니메이션 기초 이해 필요)
핵심 요약
animation-timeline: scroll()
/view()
속성으로 스크롤/뷰포트 기반 애니메이션 구현 가능animation-range
로 애니메이션 실행 구간 정의 (예: 뷰포트 50% 내에서만 실행)prefers-reduced-motion
미디어 쿼리 사용으로 모션 민감 사용자 보호 권장
섹션별 세부 요약
1. Scroll-driven Animation 개요
- CSS 애니메이션은 기존
document timeline
(시간 기반) 대신 스크롤/뷰포트 기반으로 실행 가능 animation-timeline
속성 도입 (CSS Animations Level 2, 2023년)scroll()
타임라인: 사용자 스크롤 시 애니메이션 실행 (예: 프로그레스 바 증가 효과)view()
타임라인: 타깃 요소가 뷰포트에 진입 시 애니메이션 시작 (예: 이미지 슬라이드 인 효과)
2. 구현 예시 및 속성 사용법
animation-range
로 애니메이션 실행 구간 정의:
```css
img {
animation-range: 0% 50%; / 뷰포트 50% 내에서만 실행 /
}
```
@keyframes
정의 시 기존 CSS와 동일한 방식 사용:
```css
@keyframes slideIn {
- % { transform: translateX(100%); opacity: 0; }
- % { transform: translateX(0%); opacity: 1; }
}
```
prefers-reduced-motion
미디어 쿼리로 애니메이션 비활성화:
```css
@media not (prefers-reduced-motion) {
/ 애니메이션 코드 삽입 /
}
```
3. 브라우저 지원 및 고려사항
- Safari 26 beta부터 지원 (현재 단계적 확대 중)
scroll()
,view()
함수에scroller
요소 (기본:nearest
) 및 축(block, inline, x, y) 지정 가능entry/exit
등의 옵션으로 정밀한 UX 구현 가능
결론
- CSS 기반 스크롤 애니메이션은 라이브러리 없이도 간결하게 구현 가능
- 접근성을 위해
prefers-reduced-motion
미디어 쿼리와 함께 사용 필수 - Safari 26 beta 이후로 점차 표준화 예정, 모션 민감 사용자 대응이 핵심 팁