CSS cubic-bezier() 함수

정의와 사용법

CSS의 cubic-bezier() 함수는 삼차 베塞尔 곡선을 정의합니다.

삼차 베塞尔 곡선은 네 개의 점 P0, P1, P2, P3로 정의됩니다. CSS에서 P0과 P3는 곡선의 시작점과 끝점이며, 이 점의 좌표는 고정된 비율입니다. P0은 (0, 0)으로, 초기 시간과 초기 상태를 나타냅니다；P3은 (1, 1)으로, 최종 시간과 최종 상태를 나타냅니다.

cubic-bezier() 함수는 animation-timing-function 속성과 transition-timing-function 속성을 함께 사용합니다.

예시

예제 1

시작에서 끝까지 속도가 변하는 전환 효과:

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

직접 테스트해 보세요

예제 2

다양한 삼차 베塞尔 속도 값을 가진 <div> 요소를 보여줍니다:

#div1 {animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

직접 테스트해 보세요

CSS 문법

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

기술 세부 사항

브라우저 지원

표에서의 숫자는 이 함수를 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

관련 페이지

참조:CSS animation-timing-function 속성

참조:CSS 트랜지션-타이밍-함수 속성