ตัวอย่าง
ผลการเปลี่ยนแปลงที่มีความเร็วเท่ากันตั้งแต่ต้นจนจบ:
div {
-webkit-transition-timing-function: linear; /* Safari and Chrome */
transition-timing-function: linear;
}
ลองตัวเอง» ความหมายและการใช้งาน
สถานที่ให้บริการการเปลี่ยนแปลงระยะเวลา-ฟังก์ชั่นระบุโค้งความเร็วของผลกระทบการเปลี่ยนแปลง
คุณสมบัตินี้จะช่วยให้ผลการเปลี่ยนแปลงที่จะเปลี่ยนความเร็วในช่วงระยะเวลาของมัน
| ค่าเริ่มต้น: | ease |
|---|---|
| รับการถ่ายทอด: | no |
| Animatable: | no. Read about animatable |
| เวอร์ชัน: | CSS3 |
| ไวยากรณ์ javascript: | object .style.transitionTimingFunction="linear" Try it |
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
ตามด้วยหมายเลข -webkit-, -moz- หรือ -o- ระบุรุ่นแรกที่ทำงานร่วมกับคำนำหน้า
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| 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- |
CSS ไวยากรณ์
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;ค่าทรัพย์สิน
| ความคุ้มค่า | ลักษณะ |
|---|---|
| ease | ค่ามาตรฐาน ระบุผลการเปลี่ยนแปลงกับการเริ่มต้นช้าแล้วอย่างรวดเร็วแล้วจบช้า (equivalent to cubic-bezier(0.25,0.1,0.25,1) ) |
| linear | ระบุผลการเปลี่ยนแปลงที่มีความเร็วเท่ากันตั้งแต่ต้นจนจบ (equivalent to cubic-bezier(0,0,1,1) ) |
| ease-in | ระบุผลการเปลี่ยนแปลงกับการเริ่มต้นช้า (เทียบเท่า cubic-bezier(0.42,0,1,1) ) |
| ease-out | ระบุผลการเปลี่ยนแปลงที่มีปลายช้า (เทียบเท่า cubic-bezier(0,0,0.58,1) ) |
| ease-in-out | ระบุผลการเปลี่ยนแปลงกับการเริ่มต้นและจุดสิ้นสุดช้า (เทียบเท่า cubic-bezier(0.42,0,0.58,1) ) |
| step-start | เทียบเท่ากับ steps(1, start) |
| step-end | เทียบเท่ากับ steps(1, end) |
| steps(int,start|end) | ฟังก์ชั่นระบุก้าวที่มีสองพารามิเตอร์ พารามิเตอร์แรกระบุจำนวนของช่วงเวลาในการทำงาน มันจะต้องเป็นจำนวนเต็มบวก (greater than 0) พารามิเตอร์ที่สองซึ่งเป็นตัวเลือกอย่างใดอย่างหนึ่งเป็นค่า "start" หรือ "end" และระบุจุดที่การเปลี่ยนแปลงของค่าที่เกิดขึ้นภายในช่วงเวลา ถ้าพารามิเตอร์ที่สองถูกละไว้ก็จะได้รับค่า "end" |
| cubic-bezier( n , n , n , n ) | กำหนดค่าของคุณเองในการทำงานลูกบาศก์ Bezier ค่าที่เป็นไปได้ค่าตัวเลข 0-1 |
| initial | การตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น อ่านเกี่ยวกับการเริ่มต้น |
| inherit | สืบทอดคุณสมบัตินี้จากองค์ประกอบหลักของมัน อ่านเกี่ยวกับการรับมรดก |
Tip: ลองค่าที่แตกต่างกันในตัวอย่างด้านล่างเพื่อเข้าใจวิธีการทำงาน!
ตัวอย่างเพิ่มเติม
ตัวอย่าง
เพื่อทำความเข้าใจค่าฟังก์ชั่นที่แตกต่างกัน: ที่นี่ห้าองค์ประกอบ div ที่แตกต่างกันกับห้าค่าที่แตกต่างกัน
/* For Safari 3.1 to 6.0 */
#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;}
/* Standard
syntax */
#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;}
ลองตัวเอง» ตัวอย่าง
เช่นเดียวกับตัวอย่างข้างต้น แต่ความเร็วของเส้นโค้งที่มีการระบุด้วยฟังก์ชั่นลูกบาศก์ Bezier:
/* For Safari 3.1 to 6.0 */
#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);}
/* Standard syntax */
#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);}
ลองตัวเอง» หน้าเว็บที่เกี่ยวข้อง
กวดวิชา CSS: CSS3 Transitions
อ้างอิง HTML DOM: transitionTimingFunction property