CSS 도구/이징 함수 에디터
이징 함수 에디터
부드러운 애니메이션을 위한 커스텀 큐빅 베지어 이징 함수 디자인
곡선 에디터
제어점을 드래그하여 곡선 조정
제어
1s
애니메이션 미리보기
프리셋
CSS 코드
Loading...CSS 이징 함수 가이드
부드럽고 자연스러운 애니메이션을 만드는 방법을 알아보세요
이징이란?
이징 함수는 시간에 따른 애니메이션의 변화율을 지정합니다. cubic-bezier 함수는 4개의 제어점으로 곡선을 정의하여 커스텀 가속 및 감속 패턴을 만들 수 있습니다. 이를 통해 선형 움직임보다 더 자연스럽고 매력적인 애니메이션을 만들 수 있습니다.
사용 방법
- 곡선의 제어점을 드래그하여 이징 조정
- 프리셋 버튼으로 일반적인 이징 함수 적용
- 애니메이션을 미리보기하여 효과 확인
- CSS에서 사용할 cubic-bezier 값 복사
전문가 팁
- 들어오는 애니메이션에는 ease-out, 나가는 애니메이션에는 ease-in 사용
- Y축에서 0-1 범위를 벗어난 값은 오버슈트 효과 생성
- 선형 이징은 투명도와 색상 전환에 가장 적합
브라우저 지원
cubic-bezier() 함수는 Chrome, Firefox, Safari, Edge를 포함한 모든 최신 브라우저에서 지원됩니다. CSS 전환 및 애니메이션 사양의 일부로 뛰어난 호환성을 제공합니다.
자주 묻는 질문
cubic-bezier의 4개 값은 무엇을 의미하나요?
cubic-bezier(x1, y1, x2, y2)에서 x1, y1은 첫 번째 제어점, x2, y2는 두 번째 제어점입니다. x 값은 0~1 사이여야 하고(시간을 나타냄), y 값은 범위를 벗어날 수 있습니다(오버슈트 효과). 시작점(0,0)과 끝점(1,1)은 고정되어 있습니다.
ease, ease-in, ease-out의 차이점은 무엇인가요?
ease는 시작과 끝이 부드럽고 중간이 빠릅니다. ease-in은 느리게 시작해서 빨라집니다(가속). ease-out은 빠르게 시작해서 느려집니다(감속). ease-in-out은 시작과 끝 모두 느립니다. UI 애니메이션에는 주로 ease-out을 사용합니다.
오버슈트(탄성) 효과는 어떻게 만드나요?
y 값이 0보다 작거나 1보다 큰 cubic-bezier를 사용합니다. 예: cubic-bezier(0.68, -0.55, 0.27, 1.55)는 시작과 끝에서 목표를 살짝 넘었다 돌아오는 탄성 효과를 만듭니다. 이런 효과는 버튼 클릭이나 모달 등장에 활력을 줍니다.
steps() 함수는 언제 사용하나요?
steps() 함수는 연속적이 아닌 단계적 애니메이션을 만듭니다. 스프라이트 애니메이션, 타자기 효과, 시계 초침 같은 불연속적인 움직임에 적합합니다. steps(5)는 애니메이션을 5단계로 나누어 실행합니다.
어떤 이징 함수를 선택해야 하나요?
요소가 나타날 때는 ease-out(빠르게 나타나고 천천히 정착), 사라질 때는 ease-in(천천히 시작해 빠르게 사라짐)을 사용하세요. 이동 애니메이션에는 ease-in-out이 자연스럽습니다. 배경색이나 투명도 변화에는 linear가 적합합니다.