CSS Cubic Bezier 생성기
두 핸들을 드래그하여 이징 곡선을 만들고, 등속 운동과 비교하는 실시간 애니메이션을 확인한 뒤 cubic-bezier() 값을 복사해 보세요.
cubic-bezier(0.25, 0.1, 0.25, 1)곡선은 브라우저에서 직접 렌더링됩니다. 설정한 어떤 데이터도 BroBroGo 서버로 전송되지 않습니다.
자주 묻는 질문
두 개의 핸들과 네 개의 숫자는 무엇을 의미하나요?
곡선은 왼쪽 아래(시작점)에서 오른쪽 위(끝점)로 진행되며, 가로는 시간의 흐름을, 세로는 진행률을 나타냅니다. 곡선을 구부리는 두 개의 조절 핸들이 제어점이며, 각각 X와 Y 좌표를 가져 합쳐서 cubic-bezier(x1, y1, x2, y2)가 됩니다. X는 항상 0과 1 사이로 유지되지만, Y는 상단이나 하단 경계를 벗어날 수 있어 움직임이 안착하기 전에 오버슈트하거나 뒤로 당겨지는 모션을 만들어낼 수 있습니다.
이 값을 CSS에서 어떻게 사용하나요?
생성된 cubic-bezier() 값을 복사하여 transition-timing-function, animation-timing-function 또는 단축 속성(예: transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)) 등 타이밍 함수가 들어가는 곳에 붙여넣으세요. ease, ease-in, ease-out, ease-in-out 키워드는 고정된 cubic-bezier 곡선일 뿐이므로, 해당 프리셋을 선택하면 키워드 뒤에 숨겨진 정확한 수치를 확인할 수 있습니다.
바운스(bounce)나 탄성(elastic) 효과도 만들 수 있나요?
단일 곡선만으로는 어렵습니다. 하나의 cubic-bezier로도 예비 동작(anticipate)이나 오버슈트(overshoot) 효과는 낼 수 있지만(예: 'back' 프리셋은 핸들 하나를 박스 바깥으로 당겨 이 효과를 구현함), 이는 한 방향으로 움직였다가 안착하는 것만 가능합니다. 여러 번 방향을 바꾸는 통통 튀는(bounce) 효과나 탄성(elastic) 효과는 단일 cubic-bezier로 표현할 수 없으며, CSS 키프레임(keyframes)이나 여러 지점을 정의하는 linear() 함수를 사용해야 합니다.