📈 CSS 이징 곡선 생성기
제어점을 조절해 원하는 가속·감속 곡선을 만들고, 공이 움직이는 미리보기로 감을 잡은 뒤 값을 복사합니다. 모든 처리는 브라우저에서만 이뤄집니다.
사용 방법
- 프리셋을 고르거나 네 개의 제어점 슬라이더를 조절합니다.
- 곡선과 움직이는 공 미리보기로 느낌을 확인합니다.
- 생성된 cubic-bezier() 값을 복사해 transition에 붙여넣습니다.
이럴 때 유용해요
- 기본 ease보다 개성 있는 애니메이션 곡선을 만들 때
- 튕기는(overshoot) 효과처럼 1을 넘는 곡선을 시험할 때
- 디자이너와 개발자가 같은 이징 값을 공유할 때
알아두면 좋은 팁
- y값을 0~1 밖으로 두면 목표를 지나쳤다 돌아오는 튕김(overshoot) 효과가 납니다.
- ease-out 계열(초반 빠르고 끝에서 감속)은 UI 진입 애니메이션에 자연스럽습니다.
- 미리보기 재생 버튼으로 여러 값을 번갈아 비교해 보세요.
자주 묻는 질문
cubic-bezier의 네 숫자는 무엇인가요?
두 개의 제어점 좌표(x1, y1, x2, y2)입니다. x는 시간(0~1), y는 진행도로, 이 두 점이 시작(0,0)과 끝(1,1)을 잇는 곡선의 휘어짐을 결정합니다.
ease, ease-in-out과 무엇이 다른가요?
ease 같은 키워드는 미리 정해진 cubic-bezier 값의 별칭입니다. 예를 들어 ease는 cubic-bezier(0.25, 0.1, 0.25, 1)입니다. 이 도구로 그 값을 미세 조정해 나만의 곡선을 만들 수 있습니다.
y값이 1보다 큰 곡선도 되나요?
네. y가 0~1을 벗어나면 애니메이션이 목표를 지나쳤다가 돌아오는 탄성 효과가 납니다. 버튼이 살짝 튀는 듯한 생동감 있는 모션에 유용합니다.
