사용법
- 파란·주황 제어점을 드래그해 곡선 모양을 조절합니다.
- 아래 미리보기에서 실제 움직임을 확인합니다.
- 프리셋으로 빠르게 시작하거나, CSS 값 복사로 cubic-bezier() 값을 가져갑니다.
활용 팁
- 자연스러운 등장: 요소가 나타날 때는 ease-out 계열(처음 빠르고 끝에 천천히)이 부드럽게 느껴집니다.
- 튕김 효과: 제어점 y를 0 아래나 1 위로 끌면 목표를 살짝 지나쳤다 돌아오는 탄력 있는 움직임을 만들 수 있습니다.
- 지속시간과 함께: 같은 곡선이라도 transition 시간이 길고 짧음에 따라 느낌이 다릅니다. 0.2~0.4초가 UI에 흔히 쓰입니다.
자주 묻는 질문
Q. cubic-bezier는 어디에 쓰나요?
CSS의 transition이나 animation에서 시간에 따른 변화 속도(이징)를 정의할 때 씁니다. transition-timing-function: cubic-bezier(...) 형태로 넣으면 됩니다. 기본 ease·linear로는 표현하기 어려운, 처음에 빠르다 천천히 멈추거나 살짝 튀는 듯한 자연스러운 움직임을 만들 수 있습니다.
Q. y 값이 0~1을 벗어나도 되나요?
네. 제어점의 y 값은 0보다 작거나 1보다 클 수 있습니다. 이렇게 하면 목표 지점을 잠깐 지나쳤다가 되돌아오는 '오버슈트(튕김)' 효과를 만들 수 있습니다. 다만 x 값(0~1)은 시간 축이라 그 범위를 벗어날 수 없습니다.
Q. 만든 값은 어떻게 쓰나요?
표시된 cubic-bezier(...) 값을 복사해 CSS의 transition-timing-function이나 animation-timing-function에 그대로 붙여넣으면 됩니다. 예를 들어 transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); 처럼 사용합니다.