뒤집힌 키프레임
애니메이션이 "to" 상태에서 시작해 "from" 상태로 끝납니다.
⚠️ CSS 스크롤 타임라인의 한계
CSS 스크롤 기반 애니메이션은 스크롤 방향을 감지하지 못합니다.
animation-direction: reverse는 스크롤 위치에 따라 애니메이션을 거꾸로 재생할 뿐,
"위로 스크롤할 때만" 애니메이션을 트리거하지는 못합니다.
스크롤 방향(위/아래)을 감지해 애니메이션을 트리거하려면 JavaScript가 필요합니다. 아래 대안을 참고하세요.
역방향 재생
스크롤 위치가 커질수록 애니메이션이 거꾸로 재생됩니다.
아래로 스크롤
애니메이션이 역방향으로 재생되는 것을 확인해보세요.
동작 원리
animation-direction: reverse는 키프레임을 100%에서 0% 방향으로 재생합니다.
위치 기반
여전히 스크롤 위치에 묶여 있을 뿐, 방향과는 무관합니다.
눈에 보이는 차이
요소가 보이는 상태로 시작해서, 내려갈수록 사라집니다.
CSS와 JavaScript
한계를 정확히 짚어봅니다.
방향 감지 — 불가
위치 대응 — 가능
JS
방향 감지에 필요