애니메이션 중 1차원 값이 얼마나 빠르게 변화하는 지를 설명하는 수학 함수를 나타낸다.
수학 함수에 의해 지속 시간에 대한 속도 변화를 줄 수 있는 3차원 베지어 곡선을 정의한다.
Cubic Bezier 함수는 그래프 끝점 P0과 P3가 각각 0,0
과 1,1
로 제한되고 P1과 P2의 좌표는 범위가 0에서 1까지로 제한된다.
Cubic Bezier 함수의 인수로 P1(x1, y1)과 P2(x2, y2)의 좌표값을 아래와 같은 형식으로 지정한다.
cubic-bezier(x1, y1, x2, y2)
cubic-bezier()
함수를 사용하기 위한 값을 나타낸다.
<number [0,1]>, <number>, <number [0,1]>, <number>
차례대로 네 개의 숫자(x1
, y1
, x2
, y2
) 중에서 x1
, y1
는 곡선의 점 P1
의 좌표이고 x2
, y2
는 점 P2
의 좌표를 지정한다. 두 개의 x
값은 0
과 1
사이의 범위에 있어야 한다.
animation-timing-function: cubic-bezier(.04, .88, .89, .19);
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Easing Functions Level 1 | 후보 추천 초안 | 어떤 값의 속도 변화를 제어하는 변환을 정의하는 방법을 설명한다. Last review date: 2022-6-6 |