cubic-bezier 편집기

이게 뭔가요?

제어점 두 개를 끌어 CSS 이징 곡선을 만들고, 실제 애니메이션으로 바로 확인합니다. 미리보기는 Web Animations API로 진짜 CSS 이징을 돌리므로 브라우저에서 보게 될 움직임과 같습니다.

곡선을 읽는 법

• 가로축(x) — 시간의 흐름, 0에서 1
• 세로축(y) — 진행도, 0에서 1

곡선이 가파른 구간은 빠르게, 완만한 구간은 느리게 움직입니다. 직선이면 처음부터 끝까지 같은 속도(linear)입니다.

cubic-bezier(x1, y1, x2, y2)에서 네 숫자는 가운데 제어점 두 개의 좌표입니다. 시작점 (0,0)과 끝점 (1,1)은 고정이라 적지 않습니다.

x가 0~1로 묶이는 이유

가로축이 시간이기 때문입니다. 시간은 되감기지 않습니다.

제어점의 x가 1을 넘어가면 곡선이 뒤로 접히면서 같은 시각에 진행도가 두 개 생깁니다. 애니메이션이 순간이동하는 셈이라 CSS 규격 자체가 x를 0~1로 제한합니다.

반면 y는 제한이 없습니다. 그래서 재미있는 일이 생깁니다.

y를 1 밖으로 보내면 튕깁니다

y가 1을 넘으면 목표 지점을 지나쳤다가 돌아옵니다. 0 아래로 내리면 반대 방향으로 살짝 물러났다 출발합니다. 둘을 함께 쓰면 이런 값이 됩니다.

transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);

뒤로 살짝 당겼다가 튀어나가서 목표를 지나친 뒤 제자리로 돌아옵니다. 버튼 클릭이나 모달 등장에 쓰면 생기가 붙습니다. 다만 과하면 산만해지므로 1.1~1.6 정도가 무난합니다.

기본 이징 값

어떤 걸 골라야 하나

• 화면에 등장하는 것 — ease-out 계열. 빠르게 나타나 부드럽게 멈추면 반응이 빠르게 느껴집니다.
• 화면에서 사라지는 것 — ease-in 계열. 천천히 출발해 빠르게 빠집니다.
• 위치를 옮기는 것 — ease-in-out 계열.

경험적으로 등장에는 ease-out을 쓰는 편이 좋습니다. 사용자가 기다리는 구간이 앞쪽이라, 앞을 빠르게 처리하면 체감 속도가 올라갑니다.

쓰는 법

.card {
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

JavaScript에서도 같은 문자열을 씁니다.

el.animate([{ opacity: 0 }, { opacity: 1 }], {
  duration: 300,
  easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
});

알아두면 좋은 것

• 제어점은 끌어서 옮기거나, 눌러 선택한 뒤 방향키로 미세 조정할 수 있습니다. Shift와 함께 누르면 10배씩 움직입니다.
• 동작 최소화(prefers-reduced-motion) 설정을 켠 사용자에게는 미리보기를 재생하지 않습니다. 실제 서비스에서도 이 설정을 존중하는 편이 좋습니다.
• 애니메이션 길이는 대개 200~400ms가 적당합니다. 500ms를 넘으면 느리게 느껴지고, 100ms 아래면 인식되지 않습니다.