CSS Cubic Bezier 편집기
CSS의 transition·animation에 사용되는 cubic-bezier() 이징 함수를 시각적으로 편집합니다. 제어점을 드래그하고 실시간 애니메이션 미리보기로 결과를 확인하세요.
미리보기
사용 방법
두 제어점(파란 점)을 드래그하거나 입력란에 좌표를 직접 입력하세요. 곡선이 즉시 반영됩니다. y 값은 [-0.5, 1.5] 범위까지 "overshoot" 표현을 위해 허용됩니다.
오른쪽 미리보기 영역의 공이 "재생" 버튼을 누를 때마다 현재 이징으로 움직입니다. 변형이 큰 곡선일수록 공의 가속·감속·반동이 뚜렷합니다.
하단의 CSS 코드(transition-timing-function: cubic-bezier(…))를 한 번에 복사해 프로젝트에 붙여넣으세요. 프리셋 버튼으로 표준 이징을 즉시 불러올 수도 있습니다.
자주 묻는 질문
cubic-bezier(0.25, 0.1, 0.25, 1)이 무슨 뜻?
CSS의 표준 이징 함수입니다. 4개 숫자는 두 제어점의 x·y 좌표(P1=(0.25, 0.1), P2=(0.25, 1))를 의미합니다. P0=(0,0)·P3=(1,1)은 고정. 이 4개 점이 이루는 베지어 곡선이 "시간 → 진행도" 매핑이 됩니다.
y 값이 1보다 크거나 음수일 수 있나요?
네. y는 [-∞, ∞] 어디든 가능합니다. y > 1이면 "overshoot" (목표를 살짝 지나쳤다 돌아옴, 탄성 효과)이고, y < 0이면 "backtrack" (반대 방향으로 갔다가 진행)입니다. CSS는 이를 모두 지원합니다. x는 반드시 [0, 1] 범위여야 합니다.
CSS의 "ease"·"ease-in-out" 등은 어떤 값?
`ease` = cubic-bezier(0.25, 0.1, 0.25, 1.0), `ease-in` = (0.42, 0, 1.0, 1.0), `ease-out` = (0, 0, 0.58, 1.0), `ease-in-out` = (0.42, 0, 0.58, 1.0), `linear` = (0, 0, 1, 1)입니다. 본 도구의 프리셋 버튼으로 즉시 불러올 수 있습니다.
이징 함수는 transition·animation 어디에?
CSS `transition-timing-function: cubic-bezier(...)` 또는 `animation-timing-function: cubic-bezier(...)`에 사용합니다. 짧은 인터랙션(transition)과 키프레임 애니메이션(animation) 모두에서 시간 흐름을 제어합니다.
데이터가 서버에 전송되나요?
아닙니다. 모든 곡선 계산과 미리보기는 브라우저에서만 이루어지며, 입력값이 외부로 전송되지 않습니다.
