Cubic-bezier 함수는 CSS 애니메이션에서 자주 사용되는 곡선 함수로, 애니메이션의 속도를 제어하는 데 사용됩니다. 이 함수는 네 개의 제어점을 사용하여 곡선을 정의하며, cubic-bezier(p1x, p1y, p2x, p2y)와 같은 형식을 가집니다. 여기서 $p1$과 $p2$는 제어점으로, 각각의 $x$, $y$ 좌표가 애니메이션의 시작과 끝 지점 사이의 속도를 정의합니다.

Cubic-bezier 함수는 0 ≤ x ≤ 1 범위에서의 값을 입력받아, 0 ≤ y ≤ 1 범위에서의 값을 출력하는 곡선을 생성합니다. 이때, $x$ 값은 애니메이션의 진행 정도(시간)이며, $y$ 값은 애니메이션이 실제로 변화한 정도를 나타냅니다.

Cubic-bezier와 선형 보간 (Linear Interpolation)

Cubic-bezier 곡선은 네 개의 제어점을 기반으로 하는데, 이 제어점들은 다음과 같이 표현할 수 있습니다:

• P0: $(0, 0)$ — 애니메이션 시작점
• P1: $(P1x, P1y)$ — 첫 번째 제어점
• P2: $(P2x, P2y)$ — 두 번째 제어점
• P3: $(1, 1)$ — 애니메이션 끝점

Cubic-bezier 곡선은 각 점 사이의 선형 보간을 여러 번 반복하여 최종적인 곡선을 생성합니다. 이 과정은 다음과 같이 설명될 수 있습니다:

1. 1차 보간 (Linear Interpolation):

- t는 시간에 따라 0에서 1 사이의 값을 가집니다.
- 첫 번째 제어점 간의 보간:
- $Q0 = (1-t) P0 + t P1$
- $Q1 = (1-t) P1 + t P2$
- $Q2 = (1-t) P2 + t P3$

1. 2차 보간 (Linear Interpolation of Q):

- Q0, Q1, Q2 간의 보간:
- $R0 = (1-t) Q0 + t Q1$
- $R1 = (1-t) Q1 + t Q2$

1. 3차 보간 (Final Linear Interpolation):

- R0와 R1 간의 보간을 통해 최종적으로 곡선 상의 점을 계산:
- $B(t) = (1-t) R0 + t R1$

위의 과정을 통해, 각 시간 $t$에 대해 곡선상의 점 $B(t)$를 계산할 수 있습니다. 이 곡선은 네 개의 제어점 $P0, P1, P2, P3$에 의해 정의된 cubic-bezier 곡선을 따릅니다.

결과적으로, Cubic-bezier 곡선은 제어점들을 기반으로 여러 단계의 선형 보간을 통해 생성되며, 이 곡선은 애니메이션의 시간에 따른 변화 비율을 정의하는 데 사용됩니다. 예를 들어, cubic-bezier(0.25, 0.1, 0.25, 1.0)은 천천히 시작하여 중간에 느려진후 다시 빨라지는 형태로 동작합니다.