Properties

Properties

Editing
  • account_tree
  • bug_report

cubic-bezier()

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

설명

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

 

Cubic Bezier Curve

Cubic Bezier 함수는 그래프 끝점 P0과 P3가 각각 0,01,1로 제한되고 P1과 P2의 좌표는 범위가 0에서 1까지로 제한된다.

Cubic Bezier 함수의 인수로 P1(x1, y1)과 P2(x2, y2)의 좌표값을 아래와 같은 형식으로 지정한다.

cubic-bezier(x1, y1, x2, y2)

cubic bezier function curve

구문

  • animation-timing-function: cubic-bezier(.04, .88, .89, .19);
    CSS Easing Functions Level 1
    Example

버전 명세

Modules
Module NameStatusSummary
CSS Easing Functions Level 1후보 추천 초안

어떤 값의 속도 변화를 제어하는 변환을 정의하는 방법을 설명한다.


Last review date: 2022-6-6

외부 리소스

CSS cubic-bezier Builder

지원 웹브라우저