บทช่วยสอน CSS3 คุณสมบัติการเปลี่ยนแปลงระยะเวลา-ฟังก์ชั่น ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ ตัวอย่าง,สนับสนุนเบราว์เซอร์,แอตทริบิวต์คำจำกัดความและคำแนะนำ,ไวยากรณ์,ตัวอย่างเพิ่มเติม,ตัวอย่าง,ตัวอย่าง,
การเปลี่ยนที่ความเร็วเท่ากันตั้งแต่ต้นจนจบ:
ตัวเลขในตารางเป็นตัวแทนของเบราว์เซอร์แรกที่สนับสนุนหมายเลขรุ่นของทรัพย์สิน
ทันทีหลังจาก -webkit- ดิจิตอล -ms- หรือ -moz- ที่ผ่านมาในการสนับสนุนของคำนำหน้าแอตทริบิวต์หมายเลขรุ่นเบราเซอร์แรก
属性 | |||||
---|---|---|---|---|---|
transition-timing-function | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
คุณสมบัติการเปลี่ยนแปลงระยะเวลา-ฟังก์ชั่นระบุความเร็วผลการเปลี่ยนแปลง
คุณสมบัตินี้จะช่วยให้ผลการเปลี่ยนแปลงที่จะเปลี่ยนความเร็วของระยะเวลาของมัน
เริ่มต้น: | ความสะดวก |
---|---|
มรดก: | ไม่ |
เวอร์ชัน: | CSS3 |
ไวยากรณ์ javascript: | วัตถุ .style.transitionTimingFunction = "เชิงเส้น" |
ความคุ้มค่า | ลักษณะ |
---|---|
เชิงเส้น | บทบัญญัติที่ความเร็วเดียวกันที่จะเริ่มต้นผลการเปลี่ยนแปลงปลาย (เท่ากับลูกบาศก์ Bezier (0,0,1,1)) |
ความสะดวก | บทบัญญัติเริ่มต้นช้าแล้วเร็วขึ้นแล้วช้าสิ้นผลการเปลี่ยนแปลง (ลูกบาศก์ Bezier (0.25,0.1,0.25,1)) |
ความสะดวกในการ | บทเฉพาะกาลเพื่อผลของการเริ่มต้นช้า (เท่ากับลูกบาศก์ Bezier (0.42,0,1,1)) |
ความสะดวกในการเข้าออก | บทบัญญัติที่ส่วนท้ายของผลการเปลี่ยนแปลงช้า (เทียบเท่าลูกบาศก์ Bezier (0,0,0.58,1)) |
ความสะดวกในการเข้าออก | บทเฉพาะกาลมีผลเริ่มต้นช้าและปลาย (เท่ากับลูกบาศก์ Bezier (0.42,0,0.58,1)) |
ลูกบาศก์ Bezier (N, N,N, N) | คุณกำหนดค่าของคุณเองในการทำงานลูกบาศก์ Bezier ค่าที่เป็นไปเป็นตัวเลขระหว่าง 0-1 |
เคล็ดลับ: ลองค่าที่แตกต่างกันใน ตัวอย่างด้านล่างเพื่อเข้าใจวิธีการทำงาน!
เพื่อทำความเข้าใจการทำงานของค่าที่แตกต่าง: มีห้าองค์ประกอบ div ที่แตกต่างกันกับห้าค่าที่แตกต่างกัน
และเป็นตัวอย่างข้างต้น แต่ระบุโค้งความเร็วฟังก์ชั่น Bezier ลูกบาศก์: