CSS Cubic Bezier 생성기 - 이징 함수 온라인 생성
인터랙티브 비주얼 에디터로 커스텀 CSS 이징 커브를 생성하세요. 컨트롤 포인트를 드래그하고, 애니메이션을 미리보고, cubic-bezier() 코드를 복사하세요.
자주 묻는 질문
CSS cubic-bezier() 함수란 무엇인가요?
CSS cubic-bezier() 함수는 CSS 전환(transition)과 애니메이션의 속도를 제어하는 3차 베지어 이징 곡선을 정의합니다. cubic-bezier(x1, y1, x2, y2)의 네 개의 숫자 매개변수를 받으며, 이는 X축이 시간 진행(0에서 1)을, Y축이 애니메이션 진행(0에서 1)을 나타내는 곡선 위의 두 제어점(P1과 P2)을 정의합니다. 시작점 P0은 항상 (0,0)이고 끝점 P3은 항상 (1,1)입니다.
이 cubic-bezier 생성기를 어떻게 사용하나요?
인터랙티브 그래프에서 두 제어점 핸들(P1, P2)을 드래그하여 원하는 이징 곡선을 만들거나, X1, Y1, X2, Y2 입력 필드에 정확한 숫자를 입력하세요. 애니메이션 미리보기가 실시간으로 업데이트됩니다. 프리셋 라이브러리에서 시작점을 선택할 수도 있습니다. 'Linear와 비교' 토글로 등속 움직임과의 차이를 확인하세요. 생성된 CSS 코드를 복사 버튼으로 복사하세요.
데이터는 안전한가요? 서버로 전송되는 것이 있나요?
네, 완전히 안전합니다. 이 도구는 클라이언트 사이드 JavaScript로 브라우저에서 완전히 실행됩니다. 베지어 값, 애니메이션 설정 등 어떤 데이터도 서버로 전송되지 않습니다. 모든 곡선 계산, 애니메이션 렌더링, 코드 생성이 사용자의 기기에서 로컬로 처리됩니다.
cubic-bezier()에서 X와 Y 값은 무엇을 의미하나요?
네 개의 값은 2D 그래프 위의 두 제어점을 정의합니다. X 값(x1, x2)은 시간 축의 점을 나타내며 0과 1 사이여야 합니다. Y 값(y1, y2)은 진행 축의 점을 나타내며 어떤 숫자든 가능합니다. Y 값이 0과 1 사이이면 애니메이션이 정상적으로 진행됩니다. Y 값이 0 미만이거나 1을 초과하면 애니메이션이 목표 상태를 일시적으로 오버슈트하거나 언더슈트합니다.
ease, ease-in, ease-out, ease-in-out의 차이점은 무엇인가요?
이들은 특정 cubic-bezier 값에 해당하는 CSS 키워드입니다. ease(0.25, 0.1, 0.25, 1)는 약간 느리게 시작하여 빠르게 가속한 후 부드럽게 감속합니다. ease-in(0.42, 0, 1, 1)은 느리게 시작하여 가속하며, 화면을 떠나는 요소에 적합합니다. ease-out(0, 0, 0.58, 1)은 빠르게 시작하여 감속하며, 화면에 진입하는 요소에 이상적입니다. ease-in-out(0.42, 0, 0.58, 1)은 느리게 시작하여 중간에 가속한 후 다시 감속합니다.
오버슈트나 바운스 효과는 어떻게 만드나요?
Y 값(y1 또는 y2)을 [0, 1] 범위 밖으로 설정하세요. 끝 부분에서 오버슈트(요소가 목표를 넘었다가 돌아오는 효과)를 위해 y2를 1보다 크게 설정하세요(예: cubic-bezier(0.34, 1.56, 0.64, 1)). 시작 부분에서 언더슈트(요소가 뒤로 갔다가 앞으로 움직이는 효과)를 위해 y1을 0보다 작게 설정하세요.
어떤 이징 곡선을 사용해야 하나요?
최적의 이징은 애니메이션 맥락에 따라 다릅니다. UI 진입(모달, 드롭다운 표시)에는 ease-out이나 Quart/Quint Out 곡선을 사용하세요. UI 퇴장(요소 사라짐)에는 ease-in을 사용하세요. 상태 변경(색상, 크기 조정)에는 ease-in-out이 균형 잡힌 가속을 제공합니다. 인터랙션(버튼 피드백)에는 Back Out 곡선으로 미묘한 오버슈트를 추가하세요. 대부분의 UI 애니메이션에서 linear는 기계적으로 느껴지므로 피하세요.
코드 예제
function evaluateBezier(t, p0, p1, p2, p3) {
const u = 1 - t;
return u * u * u * p0 + 3 * u * u * t * p1 + 3 * u * t * t * p2 + t * t * t * p3;
}
function cubicBezierY(x, x1, y1, x2, y2) {
if (x <= 0) return 0;
if (x >= 1) return 1;
let low = 0, high = 1, mid;
for (let i = 0; i < 20; i++) {
mid = (low + high) / 2;
const cx = evaluateBezier(mid, 0, x1, x2, 1);
if (Math.abs(cx - x) < 0.0001) break;
cx < x ? (low = mid) : (high = mid);
}
return evaluateBezier((low + high) / 2, 0, y1, y2, 1);
}
function formatCubicBezier(x1, y1, x2, y2) {
const r = (n) => Math.round(n * 100) / 100;
return `cubic-bezier(${r(x1)}, ${r(y1)}, ${r(x2)}, ${r(y2)})`;
}
console.log(formatCubicBezier(0.25, 0.1, 0.25, 1));
// cubic-bezier(0.25, 0.1, 0.25, 1)
// Animate using the bezier curve
function animate(x1, y1, x2, y2, durationMs, onProgress) {
const start = performance.now();
function tick(now) {
const t = Math.min((now - start) / durationMs, 1);
onProgress(cubicBezierY(t, x1, y1, x2, y2));
if (t < 1) requestAnimationFrame(tick);
}
requestAnimationFrame(tick);
}