애니메이션 중 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)
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 |