CSS cubic-bezier() Function
ตัวอย่าง
เอฟเฟกต์การเปลี่ยนแปลงพร้อมความเร็วตัวแปรตั้งแต่ต้นจนจบ:
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
ความหมายและการใช้งาน
ฟังก์ชัน cubic-bezier() กำหนดเส้นโค้ง Cubic Bezier
เส้นโค้งลูกบาศก์เบซิเยร์ถูกกำหนดโดยสี่จุด P0, P1, P2 และ P3 P0 และ P3 คือจุดเริ่มต้นและจุดสิ้นสุดของเส้นโค้ง และใน CSS จุดเหล่านี้ได้รับการแก้ไขเนื่องจากพิกัดคืออัตราส่วน P0 คือ (0, 0) และแสดงถึงเวลาเริ่มต้นและสถานะเริ่มต้น P3 คือ (1, 1) และแสดงถึงเวลาสุดท้ายและสถานะสุดท้าย
ฟังก์ชันคิวบิก-เบซิเยร์() สามารถใช้กับคุณสมบัติ แอนิเมชั่น-ไทม์มิ่ง-ฟังก์ชัน และคุณสมบัติท รานซิชั่น-ไทม์มิ่ง-ฟังก์ชัน
รุ่น: | 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 |