CSS 큐빅 베지어() 함수
예시
시작부터 끝까지 다양한 속도로 전환 효과:
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
정의 및 사용
큐빅 베지어() 함수는 큐빅 베지어 곡선을 정의합니다.
3차 베지어 곡선은 4개의 점 P0, P1, P2 및 P3으로 정의됩니다. P0와 P3은 곡선의 시작과 끝이며 CSS에서는 좌표가 비율이므로 이 점들이 고정됩니다. P0는 (0, 0)이고 초기 시간과 초기 상태를 나타내고, P3은 (1, 1) 마지막 시간과 마지막 상태를 나타냅니다.
큐빅 베지어() 함수는 animation-timing-function 속성 및 transition-timing- function 속성과 함께 사용할 수 있습니다 .
버전: | CSS3 |
---|
브라우저 지원
표의 숫자는 기능을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Function | |||||
---|---|---|---|---|---|
cubic-bezier() | 4.0 | 10.0 | 4.0 | 3.1 | 10.5 |
CSS 구문
cubic-bezier(x1,y1,x2,y2)
Value | Description |
---|---|
x1,y1,x2,y2 | Required. Numeric values. x1 and x2 must be a number from 0 to 1 |