CSS에서 cubic-bezier() 함수를 사용하면 전환(transition)이나 애니메이션의 속도 변화를 곡선 형태로 정교하게 제어할 수 있습니다. 이 함수는 네 개의 매개변수를 받아 3차 베지어 곡선을 정의하며, 각 값은 곡선을 구성하는 두 제어점의 x축·y축 좌표를 나타냅니다.
기본 문법
transition-timing-function: cubic-bezier(x1, y1, x2, y2);
- x1, y1: 첫 번째 제어점의 좌표 (x값은 0~1 사이)
- x2, y2: 두 번째 제어점의 좌표 (x값은 0~1 사이)
x값은 반드시 0~1 범위 안에 있어야 하지만, y값은 그 범위를 벗어날 수 있습니다. y값을 1보다 크게 설정하면 요소가 목표 상태를 지나쳤다가 되돌아오는 듯한 '오버슈트(overshoot)' 효과를 연출할 수 있습니다.
예제
아래 코드는 컨테이너에 마우스를 올리면(:hover) 노란색 박스의 너비가 3초에 걸쳐 100px에서 200px로 늘어나는 예제입니다. transition-timing-function에 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>정리
cubic-bezier() 함수는 CSS에서 제공하는 기본 easing 키워드(linear, ease-in, ease-out 등)보다 훨씬 유연한 타이밍 제어가 가능합니다. 다양한 좌표 값을 실험하면서 원하는 애니메이션 느낌을 찾아보세요.