CSS3 คุณสมบัติภาพเคลื่อนไหวการกำหนดเวลาการทำงาน
ตัวอย่าง
ตั้งแต่ต้นจนจบด้วยความเร็วเดียวกันเล่นภาพเคลื่อนไหว:
animation-timing-function:linear;
-webkit-animation-timing-function:linear; /* Safari and Chrome */
-webkit-animation-timing-function:linear; /* Safari and Chrome */
ลอง»
ในด้านล่างของหน้านี้ตัวอย่างมากขึ้น
สนับสนุนเบราว์เซอร์
| 属性 | |||||
|---|---|---|---|---|---|
| animation-timing-function | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
คำจำกัดความและคำแนะนำการแท็ก
วิธีการกำหนดเวลาภาพเคลื่อนไหวฟังก์ชั่นระบุการเคลื่อนไหวจะเสร็จสมบูรณ์วงจร
ภาพยนตร์ความละเอียดโค้งความเร็วจากสไตล์ CSS ลงในจำนวนอีกชุดหนึ่งของเวลา
โค้งความเร็วที่ใช้ในการเปลี่ยนนุ่มนวล
| เริ่มต้น: | ความสะดวก |
|---|---|
| มรดก: | ไม่ |
| เวอร์ชัน: | CSS3 |
| ไวยากรณ์ javascript: | วัตถุ object.style.animationTimingFunction = "เชิงเส้น" |
ไวยากรณ์
animation-timing-function:value;
ฟังก์ชั่นการใช้งานแอนิเมชั่คณิตศาสตร์-ระยะเวลาฟังก์ชั่นที่เรียกว่าเส้นโค้ง Bezier ลูกบาศก์โค้งความเร็ว ด้วยฟังก์ชันนี้คุณสามารถใช้ค่าของคุณเองหรือใช้หนึ่งในค่าที่กำหนดไว้ล่วงหน้า:
| ความคุ้มค่า | ลักษณะ | ทดสอบ |
|---|---|---|
| เชิงเส้น | นิเมชั่นตั้งแต่ต้นจนจบด้วยความเร็วเดียวกัน | ทดสอบ |
| ความสะดวก | ผิดนัด อะนิเมะเริ่มที่ความเร็วต่ำแล้วความเร็วช้าลงในตอนท้าย | ทดสอบ |
| ความสะดวกในการ | นิเมชั่นเริ่มต้นที่ความเร็วต่ำ | ทดสอบ |
| ความสะดวกในการเข้าออก | นิเมชั่นที่ต่ำสุด | ทดสอบ |
| ความสะดวกในการเข้าออก | จุดเริ่มต้นและจุดสิ้นสุดนิเมชั่นที่ความเร็วต่ำ | ทดสอบ |
| ลูกบาศก์ Bezier (N, N,N, N) | ในฟังก์ชั่นลูกบาศก์ Bezier ในค่าของคุณเอง ค่าที่เป็นไปได้ 0-1 ค่า |
เคล็ดลับ: ลองต่อไปนี้ "ลอง" ฟังก์ชั่นใช้ค่าที่แตกต่างกัน
ตัวอย่างออนไลน์
ตัวอย่าง
เพื่อทำความเข้าใจค่าระยะเวลาการทำงานที่แตกต่างกันมีให้ชุดของห้าค่าที่แตกต่างของห้าองค์ประกอบ div ที่แตกต่างกัน:
/* W3C and Opera: */
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
/* Firefox: */
#div1 {-moz-animation-timing-function: linear;}
#div2 {-moz-animation-timing-function: ease;}
#div3 {-moz-animation-timing-function: ease-in;}
#div4 {-moz-animation-timing-function: ease-out;}
#div5 {-moz-animation-timing-function: ease-in-out;}
/* Safari and Chrome: */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
/* Firefox: */
#div1 {-moz-animation-timing-function: linear;}
#div2 {-moz-animation-timing-function: ease;}
#div3 {-moz-animation-timing-function: ease-in;}
#div4 {-moz-animation-timing-function: ease-out;}
#div5 {-moz-animation-timing-function: ease-in-out;}
/* Safari and Chrome: */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}
ลอง»
ตัวอย่าง
เช่นเดียวกับตัวอย่างก่อนหน้านี้ แต่จะถูกกำหนดโดยฟังก์ชั่นโค้งความเร็วลูกบาศก์ Bezier:
/* W3C and Opera: */
#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);}
/* Firefox: */
#div1 {-moz-animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-moz-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-moz-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-moz-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-moz-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari and Chrome: */
#div1 {-webkit-animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
#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);}
/* Firefox: */
#div1 {-moz-animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-moz-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-moz-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-moz-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-moz-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari and Chrome: */
#div1 {-webkit-animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
ลอง»
บทความที่เกี่ยวข้อง
กวดวิชา CSS3: CSS3 นิเมชั่น