Hàm cubic-bezier() của CSS

Định nghĩa và cách sử dụng

CSS cubic-bezier() hàm được sử dụng để định nghĩa đường cong三次 Bezier.

Đường cong三次 Bezier được định nghĩa bởi bốn điểm P0, P1, P2 và P3. Trong CSS, P0 và P3 là điểm đầu và cuối của đường cong, và tọa độ của các điểm này là tỷ lệ cố định. P0 là (0, 0), đại diện cho thời gian và trạng thái ban đầu; P3 là (1, 1), đại diện cho thời gian và trạng thái cuối cùng.

cubic-bezier() hàm có thể được sử dụng cùng với animation-timing-function và transition-timing-function Sử dụng thuộc tính cùng nhau.

Mẫu

Ví dụ 1

Hiệu ứng chuyển đổi từ đầu đến cuối thay đổi tốc độ:

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

Thử ngay

Ví dụ 2

Hiển thị các phần tử <div> có giá trị tốc độ三次 Bezier khác nhau:

#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);}

Thử ngay

Ngữ pháp CSS

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

Chi tiết kỹ thuật

Hỗ trợ trình duyệt

Số liệu trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ hàm này hoàn toàn.

Trang liên quan

Tham khảo:Thuộc tính animation-timing-function CSS

Tham khảo:Thuộc tính transition-timing-function CSS