CSS3 คุณสมบัติการเปลี่ยนแปลงระยะเวลา-ฟังก์ชั่น
ตัวอย่าง
การเปลี่ยนที่ความเร็วเท่ากันตั้งแต่ต้นจนจบ:
transition-timing-function: linear;
-webkit-transition-timing-function: linear; /* Safari and Chrome */
-webkit-transition-timing-function: linear; /* Safari and Chrome */
ลอง»
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางเป็นตัวแทนของเบราว์เซอร์แรกที่สนับสนุนหมายเลขรุ่นของทรัพย์สิน
ทันทีหลังจาก -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 = "เชิงเส้น" |
ไวยากรณ์
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
| ความคุ้มค่า | ลักษณะ |
|---|---|
| เชิงเส้น | บทบัญญัติที่ความเร็วเดียวกันที่จะเริ่มต้นผลการเปลี่ยนแปลงปลาย (เท่ากับลูกบาศก์ 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 ที่แตกต่างกันกับห้าค่าที่แตกต่างกัน
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
/* Safari */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
/* Safari */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
ลอง»
ตัวอย่าง
และเป็นตัวอย่างข้างต้น แต่ระบุโค้งความเร็วฟังก์ชั่น Bezier ลูกบาศก์:
#div1 {transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari */
#div1 {-webkit-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari */
#div1 {-webkit-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
ลอง»