📈 큐빅 베지어 이징 생성기

4개의 제어값(x1·y1·x2·y2)으로 CSS 애니메이션의 가속·감속 곡선(cubic-bezier)을 만들어 줍니다. 이징 곡선 그래프와 실제로 움직이는 미리보기를 함께 보며 감을 잡고, transition·timing-function CSS를 바로 복사할 수 있습니다.

사용 방법

1. ease-in-out·back-out 같은 프리셋을 눌러 시작점을 잡습니다.
2. x1·y1·x2·y2 슬라이더(또는 숫자 입력)로 곡선을 세밀하게 조정합니다.
3. 곡선 그래프와 왕복하는 도형 미리보기로 움직임을 확인합니다.
4. 지속시간을 정한 뒤 transition 또는 timing-function CSS를 복사합니다.

자주 묻는 질문

y값이 1보다 크거나 0보다 작아도 되나요?

네. x값은 시간축이라 0~1 사이여야 하지만 y값은 진행률이라 1을 넘거나 0 아래로 내려갈 수 있습니다. 이때 목표 지점을 지나쳤다 되돌아오는 '튕김(overshoot)' 효과가 만들어집니다.

미리보기 움직임이 실제와 같나요?

미리보기는 브라우저의 실제 CSS transition으로 렌더링하므로, 같은 브라우저에서 웹사이트에 적용했을 때와 동일하게 움직입니다. 도형이 좌우로 반복 왕복하며 곡선의 가속·감속을 보여 줍니다.

transition과 timing-function 중 무엇을 복사해야 하나요?

지속시간까지 포함한 한 줄이 필요하면 'transition 복사'를, 이징 곡선만 다른 규칙에 넣고 싶으면 'timing-function 복사'를 쓰세요. 두 값 모두 참고용 근사치가 아닌 그대로 사용 가능한 정확한 CSS입니다.