Hàm CSS khối-bezier ()
❮ Tham chiếu các chức năng CSS
Thí dụ
Hiệu ứng chuyển tiếp với tốc độ thay đổi từ đầu đến cuối:
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
Định nghĩa và Cách sử dụng
Hàm khối-bezier () xác định một đường cong Bezier khối.
Đường cong Bezier khối được xác định bởi bốn điểm P0, P1, P2 và P3. P0 và P3 là điểm bắt đầu và điểm kết thúc của đường cong và trong CSS, các điểm này được cố định vì các tọa độ là tỷ lệ. P0 là (0, 0) và đại diện cho thời gian ban đầu và trạng thái ban đầu, P3 là (1, 1) và đại diện cho thời gian cuối cùng và trạng thái cuối cùng.
Hàm khối-bezier () có thể được sử dụng với thuộc tính animation-timing-function và thuộc tính chuyển đổi-thời gian-chức năng .
Phiên bản: | CSS3 |
---|
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ chức năng.
Function | |||||
---|---|---|---|---|---|
cubic-bezier() | 4.0 | 10.0 | 4.0 | 3.1 | 10.5 |
Cú pháp 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 |
❮ Tham chiếu các chức năng CSS