cubic-bezier로 CSS 전환을 레벨업하기

Source: Dev.to

cubic‑bezier란?

CSS에서 cubic-bezier는 transition-timing-function 혹은 animation-timing-function 속성에 사용됩니다. 이는 cubic Bézier curve를 이용해 전환 중 중간값이 어떻게 계산되는지를 정의합니다.

cubic-bezier(x1, y1, x2, y2)

네 개의 숫자는 곡선 위의 두 제어점을 정의합니다. 곡선은 항상 (0, 0)에서 시작해 (1, 1)에서 끝나며, 이는 전환의 시작과 끝을 나타냅니다. 제어점은 두 상태 사이에서 애니메이션이 어떻게 진행될지를 결정합니다.

자세한 설명은 MDN Web Docs의 easing functions 페이지를 참고하세요.

차이를 만드는 예시

아래 코드는 기본 easing을 보다 표현력 있는 cubic‑bezier 곡선으로 교체한 예시입니다. 라이브 환경에서 요소에 마우스를 올려 효과를 확인해 보세요.

예시 1 – 스케일 및 회전

Tailwind CSS

<!-- Tailwind example markup (add your own HTML) -->

Plain CSS

.icon {
  transition: transform 0.5s cubic-bezier(.68, -0.6, .32, 1.6);
}
.icon:hover {
  transform: scale(0.8) rotate(359deg);
}

예시 2 – 확대

Tailwind CSS

<!-- Tailwind example markup (add your own HTML) -->

Plain CSS

.button {
  transition: transform 0.3s cubic-bezier(.34, 1.56, .64, 1);
}
.button:hover {
  transform: scale(1.5);
}

예시 3 – 수평 이동

Tailwind CSS

<!-- Tailwind example markup (add your own HTML) -->

Plain CSS

.pill {
  transition: transform 0.5s cubic-bezier(.87, 0, .13, 1);
}
.pill:hover {
  transform: translateX(2rem);
}

Note
Tailwind CSS는 ease-{in,out,in-out} 클래스와 같은 더 나은 기본값을 제공합니다. 자세한 내용은 Tailwind transition timing function docs를 확인하세요.

일부 cubic-bezier 함수에 사용된 음수 값은 목표를 초과했다가 다시 잡아오는 “bounce” 효과를 만들어, 애니메이션에 고급스러운 느낌을 줍니다.

완벽한 곡선 찾기

값을 추측하기보다 Easing Wizard 같은 인터랙티브 도구를 사용해 보세요. 제어점을 드래그하고 실시간으로 애니메이션을 확인한 뒤, 생성된 cubic-bezier 값을 바로 CSS에 복사할 수 있습니다.

일반적인 ease와 잘 다듬어진 cubic-bezier 곡선의 차이는 즉시 눈에 띕니다—인터페이스가 더 반응성 있고, 살아있으며, 전문적으로 느껴집니다.

한 번 시도해 보세요: 다음과 같은 일반 전환을

transition: all 300ms ease;

다음과 같이 커스텀 곡선으로 바꾸면

transition: all 300ms cubic-bezier(.68, -0.6, .32, 1.6);

그 개선 효과를 직접 확인할 수 있습니다.