Functions

Draft

<timing-function>timing-functioncubic-bezier(<float>x1, <float>y1, <float>x2, <float>y2)

애니메이션 중 1차원 값이 얼마나 빠르게 변화하는 지를 설명하는 수학 함수를 나타낸다.

설명

수학 함수에 의해 지속 시간에 대한 속도 변화를 줄 수 있는 3차원 베지어 곡선을 정의한다.

구문

transition-timing-function:cubic-bezier(x1,y1,x2,y2);기본형식CSS3
transition, animation 적용시 속도 변화를 적용시킬 때 사용한다.
cubic-bezier 함수에 곡선( 3차원 베지어 곡선)을 제어하는 핸들의 0~1 범위 내의 x, y 값을 인수로 사용한다. 인수로 지정되는 네 개의 숫자는 차례대로 곡선의 시작 점을 조정하는 핸들의 x, y와 곡선의 끝점을 조정하는 x, y의 값으로 구성한다.

매개 변수

<float>x1필수
베지어 곡선의 시작점을 만드는 핸들의 0~1사이의 x 좌표 값
<float>y1필수
베지어 곡선의 시작점을 만드는 핸들의 0~1사이의 y 좌표 값
<float>x2필수
시작점에서 끝점을 잇는 곡선을 만드는 핸들의 0~1사이의 x 좌표 값
<float>y2필수
시작점에서 끝점을 잇는 곡선을 만드는 핸들의 0~1사이의 y 좌표 값

반환

<timing-function>timing-function

지원 웹브라우저

외부 리소스

CSS cubic-bezier Builder