CSS에서 cubic-bezier() 함수는 전환(transition)이나 애니메이션의 속도 변화를 세밀하게 제어할 수 있는 강력한 도구입니다. 기본 제공되는 ease, linear 같은 타이밍 함수로 표현하기 어려운 복잡한 가속·감속 패턴도 베지어 곡선(Bezier curve)을 직접 정의하여 구현할 수 있습니다.
cubic-bezier() 함수란?
cubic-bezier() 함수는 네 개의 숫자 값을 인자로 받아 3차 베지어 곡선을 정의합니다. 사용 형식은 다음과 같습니다.
transition-timing-function: cubic-bezier(x1, y1, x2, y2);
- x1, x2: 0부터 1 사이의 값만 허용됩니다.
- y1, y2: 값의 범위에 제한이 없으며, 1보다 크거나 0보다 작은 값을 지정하면 오버슈트(overshoot) 효과를 만들 수 있습니다.
곡선의 시작점은 (0, 0), 끝점은 (1, 1)로 고정되어 있으며, 두 개의 제어점 (x1, y1)과 (x2, y2)가 곡선의 모양을 결정합니다.
예제 코드
아래 예제에서는 cubic-bezier(0.3, 0.3, 2.0, 0.9)를 적용하여 마우스를 올렸을 때 요소의 너비가 독특한 리듬으로 확장되는 모습을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: yellow;
transition: width 3s;
transition-timing-function: cubic-bezier(0.3, 0.3, 2.0, 0.9);
}
div:hover {
width:200px;
}
</style>
</head>
<body>
<p>아래 컨테이너에 마우스를 올려보세요:</p>
<div></div>
</body>
</html>동작 원리 살펴보기
이 예제에서 두 번째 제어점의 x값이 2.0으로 1을 초과하기 때문에, 전환 중간에 요소가 목표 너비인 200px보다 더 커졌다가 다시 줄어드는 오버슈트 현상이 발생합니다. 이러한 특성을 활용하면 실제 물리적 움직임처럼 느껴지는 자연스럽고 생동감 있는 UI 애니메이션을 만들 수 있습니다.
마무리
cubic-bezier() 함수는 처음에는 다소 어렵게 느껴질 수 있지만, Chrome DevTools나 Firefox 개발자 도구에 내장된 베지어 곡선 편집기를 활용하면 시각적으로 값을 조정하며 쉽게 익힐 수 있습니다. 다양한 값 조합을 실험해 보면서 프로젝트에 맞는 최적의 타이밍 곡선을 찾아보세요.