3차 베지어 생성기

이 도구로 할 수 있는 일

CSS 트랜지션이나 애니메이션의 이징은 (0,0)에서 (1,1)까지 이어지는 3차 베지어 곡선입니다. 그 사이에 있는 두 점이 움직임을 느리게 시작해 빠르게 끝낼지, 오버슈트를 만들지, 아니면 전혀 다른 모양이 될지를 결정합니다. ease, ease-in-out 같은 이름 붙은 키워드는 이 공간 안의 다섯 개 고정 지점일 뿐입니다. 이 도구는 설정한 두 제어점으로부터 곡선을 그리고, 그 타이밍 함수 그대로 움직이는 박스를 보여주며, 곡선만 보고는 가장 가늠하기 어려운 값인 절반 지점에서 이징된 진행률이 얼마나 되는지도 알려줍니다.

사용 방법

1. 프리셋에서 시작하거나 두 제어점을 직접 설정하세요.
2. 곡선과 움직이는 미리보기가 갱신되는 모습을 확인하세요.
3. cubic-bezier() 선언을 트랜지션이나 애니메이션에 복사하세요.

개인정보

이 도구는 전부 브라우저 안에서 동작합니다. 입력한 내용은 업로드되거나 저장되거나 공유되지 않으며, 탭을 닫으면 사라집니다.

자주 묻는 질문

서버에서 계산되는 것이 있나요?

아니요. 곡선, 움직이는 미리보기, 진행률 수치 모두 페이지에서 실행되는 JavaScript로 계산됩니다.

왜 두 X 값은 0과 1 사이로 제한되나요?

X는 경과 시간을 나타내며, CSS 명세는 곡선이 시간에 대한 유효한 함수가 되도록 0에서 1까지 앞으로만 진행하도록 요구합니다. Y는 이징된 진행률이므로 0 미만이나 1 초과도 허용되며, 이를 이용해 오버슈트나 바운스를 만들 수 있습니다.

절반 지점 수치는 무엇을 의미하나요?

애니메이션 지속 시간의 정확히 절반이 지난 순간의, 직선 진행률이 아닌 이징된 진행률입니다. 이 값이 50%보다 크면 중간 지점에서 이미 등속보다 앞서 있다는 뜻입니다.