Easing
애니메이션의 속도 변화를 제어하는 이징 함수입니다. 상황에 맞게 선택하면 자연스럽고 쾌적한 UI 움직임을 만들 수 있습니다.
Easing Functions
5가지 기본 이징 함수
ease-linearcubic-bezier(0, 0, 1, 1)
일정한 속도, 가감속 없음
용도: 프로그레스 바, 로딩 애니메이션
easecubic-bezier(0.25, 0.1, 0.25, 1)
천천히 시작해 빠르게, 다시 천천히 끝남
용도: 범용 트랜지션 (기본값)
ease-incubic-bezier(0.42, 0, 1, 1)
천천히 시작해 빠르게 끝남
용도: 화면 밖으로 나가는 요소
ease-outcubic-bezier(0, 0, 0.58, 1)
빠르게 시작해 천천히 끝남
용도: 화면 안으로 들어오는 요소
ease-in-outcubic-bezier(0.42, 0, 0.58, 1)
천천히 시작해 천천히 끝남
용도: 상태 토글, 슬라이더
Interactive Demo
각 박스는 같은 시간 동안 서로 다른 이징으로 이동합니다.
lineareaseease-inease-outease-in-outComponent Demo
실제 UI 컴포넌트에서 이징 효과를 직접 체험해보세요
Dropdown
ease-out + 200ms
Option 1
Option 2
Option 3
Modal
열 때: ease-out / 닫을 때: ease-in
Toast
ease-out + 300ms
Use Cases
자주 사용하는 UI 패턴별 권장 이징 함수
호버 효과
ease-out빠른 반응, 부드러운 마무리
모달 열기
ease-out화면 안으로 들어오는 움직임
모달 닫기
ease-in화면 밖으로 나가는 움직임
슬라이더
ease-in-out양방향으로 부드러운 움직임
로딩
linear일정한 속도의 진행
페이지 전환
ease-in-out자연스러운 속도 변화
| 패턴 | 권장 이징 | 이유 |
|---|---|---|
| 호버 효과 | ease-out | 빠른 반응, 부드러운 마무리 |
| 모달 열기 | ease-out | 화면 안으로 들어오는 움직임 |
| 모달 닫기 | ease-in | 화면 밖으로 나가는 움직임 |
| 슬라이더 | ease-in-out | 양방향으로 부드러운 움직임 |
| 로딩 | linear | 일정한 속도의 진행 |
| 페이지 전환 | ease-in-out | 자연스러운 속도 변화 |
Best Practices
✓
권장
- ✓등장 애니메이션에는 ease-out
- ✓퇴장 애니메이션에는 ease-in
- ✓상태 전환에는 ease-in-out
- ✓호버 효과에는 ease-out
✕
지양
- ✗등장 애니메이션에 ease-in
- ✗퇴장 애니메이션에 ease-out
- ✗모든 곳에 linear 사용
- ✗복잡한 cubic-bezier 남용