스크롤 페이드인 효과가 CSS로 만들어지는 원리
스크롤을 내리면 텍스트나 카드가 서서히 나타나는 웹사이트를 자주 봤을 것입니다. 움직임이 동영상처럼 매끄러워 보이지만, 사실 그 뒤에는 재생되는 영상 파일이 하나도 없습니다. 이 효과는 @keyframes라는 CSS 문법 몇 줄이 브라우저에게 "투명도를 0에서 1로 바꿔라"라고 지시하는 것뿐입니다.
요약 ① 스크롤 시 나타나는 페이드인 효과는 영상·GIF가 아니라 CSS @keyframes로 만든 애니메이션입니다 ② @keyframes는 시작(from)과 끝(to) 상태만 정의하면 브라우저가 중간 값을 자동으로 계산해 채웁니다 ③ 재생 시간·지연·반복 같은 세부 값은 animation 속성 하나에 순서대로 나열해 조절합니다
스크롤 페이드인 효과, 왜 영상 없이 재생될까
처음 이 효과를 보면 어딘가에 재생 파일이 숨어 있다고 생각하기 쉽습니다. 하지만 브라우저 개발자도구로 요소를 살펴보면 video나 img 태그가 아니라 평범한 div, p 태그만 있는 경우가 대부분입니다.
이 요소를 움직이는 건 CSS의 @keyframes 규칙입니다. 이름 그대로 '핵심 프레임'만 정의하면, 그 사이의 모든 프레임은 브라우저 렌더링 엔진이 초당 수십 번씩 자동으로 계산해서 그려줍니다.
예를 들어 페이드인은 시작(from) 지점에 opacity: 0, 끝(to) 지점에 opacity: 1만 지정하면 됩니다. 0.8초짜리 애니메이션이라면 브라우저가 그 시간 동안 두 값 사이를 매끄럽게 보간해서 재생합니다.
확인하는 방법 — CSS 키프레임으로 직접 만들기
페이드인을 직접 만들려면 두 단계만 있으면 됩니다. 먼저 @keyframes 규칙에 이름을 붙이고 시작 상태(from)에 opacity: 0, 끝 상태(to)에 opacity: 1을 적습니다. 그다음 animation 속성에 이 이름과 재생 시간, 가속 곡선(timing-function), 반복 횟수를 순서대로 나열해 요소에 연결합니다.
여기서 자주 놓치는 값이 animation-fill-mode입니다. both로 설정하지 않으면 애니메이션이 시작되기 전이나 끝난 뒤에 요소가 원래 스타일로 잠깐 보였다가 사라지는 깜빡임이 생길 수 있습니다. both를 넣으면 시작 전에는 from 상태, 종료 후에는 to 상태가 그대로 유지됩니다.
스크롤할 때만 재생하려면 한 단계가 더 필요합니다. CSS만으로는 요소가 화면에 들어왔는지 판단할 수 없어서, IntersectionObserver 같은 자바스크립트로 뷰포트 진입을 감지해 애니메이션 클래스를 붙이는 방식을 함께 씁니다.
저희 도구로 확인하기. 페이드·슬라이드·줌·바운스·펄스·흔들기·회전 프리셋을 눌러가며 재생 시간·지연·가속 곡선을 슬라이더로 맞추면, 완성된 @keyframes와 animation 속성이 포함된 CSS를 그대로 복사할 수 있습니다.
무료 · 가입 불필요 · 브라우저에서 바로 CSS 코드 생성
자주 막히는 지점
| 증상 | 원인 |
|---|---|
| 애니메이션이 아예 안 보임 | animation 속성에 적은 이름이 @keyframes 이름과 다르거나 오타가 있는 경우 |
| 시작 전에 요소가 잠깐 깜빡임 | animation-fill-mode를 both로 주지 않아 시작 전 원래 스타일이 노출됨 |
| 페이지를 열자마자 재생되고 스크롤과 무관함 | CSS만으로는 스크롤 위치를 읽지 못함 — IntersectionObserver로 클래스를 붙여야 함 |
| 반복이 멈추지 않음 | animation-iteration-count가 infinite로 설정돼 무한 반복 중인 경우 |
표에서 보듯 대부분의 문제는 이름 불일치나 fill-mode 누락처럼 값 하나를 빠뜨려서 생깁니다. 프리셋으로 완성된 코드를 받아 쓰면 이런 실수 자체가 줄어듭니다.
정리
스크롤하면 나타나는 페이드인 효과는 영상이나 GIF가 아니라, @keyframes로 정의한 시작·끝 상태를 브라우저가 자동으로 보간해서 그리는 CSS 애니메이션입니다. animation 속성에 재생 시간·가속 곡선·반복 횟수를 지정하고 fill-mode를 both로 맞추면 깜빡임 없이 원하는 상태가 유지됩니다.
값을 하나씩 코드로 옮겨 적고 새로고침하는 대신, 프리셋과 슬라이더로 실시간 미리보기를 보면서 맞추면 더 빠르게 원하는 느낌을 찾을 수 있습니다.
무료 · 가입 불필요 · 브라우저에서 바로 CSS 코드 생성
자주 묻는 질문
페이드인 효과는 자바스크립트 없이 CSS만으로 되나요?
요소가 페이지에 나타나자마자 한 번 재생되는 페이드인이라면 CSS만으로 충분합니다. 다만 스크롤해서 화면에 들어올 때만 재생하려면 뷰포트 진입을 감지하는 IntersectionObserver 같은 자바스크립트가 함께 필요합니다.
@keyframes에 중간 단계를 더 넣을 수도 있나요?
가능합니다. from·to 대신 0%, 30%, 60%, 100%처럼 퍼센트로 여러 지점을 지정하면 각 구간마다 다른 상태를 거쳐가는 좀 더 복잡한 움직임(바운스, 흔들기 등)을 만들 수 있습니다.
애니메이션 재생 시간은 얼마가 적당한가요?
페이드인·슬라이드처럼 한 번 나타나는 효과는 0.3~0.8초가 자연스럽습니다. 너무 길면 로딩처럼 느껴져 답답하고, 너무 짧으면 효과가 있는지 인지하기 어렵습니다.