이징 커브 생성기

시작점(0,0)과 끝점(1,1)을 잇는 3차 베지어 곡선의 두 제어점 좌표입니다. x는 시간(0~1 사이만 가능), y는 진행 정도를 나타내며 y는 1을 넘거나 0보다 작아질 수 있어 통통 튀는 듯한 효과도 만들 수 있습니다.

CSS의 사전 정의된 이징 키워드들도 사실 cubic-bezier 값의 별명입니다. 예를 들어 ease는 cubic-bezier(0.25, 0.1, 0.25, 1)과 같습니다.

CSS의 transition-timing-function 이나 animation-timing-function 속성에 그대로 넣으면 됩니다.