คุณสมบัติCSS ภาพเคลื่อนไหวทิศทาง
ตัวอย่าง
เล่นแอนิเมชั่นไปข้างหน้าก่อน แล้วจึงย้อนกลับ:
div {
animation-direction: alternate;
}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติanimation-direction
กำหนดว่าควรเล่นภาพเคลื่อนไหวไปข้างหน้า ข้างหลัง หรือสลับกัน
ค่าเริ่มต้น: | ปกติ |
---|---|
รับการถ่ายทอด: | ไม่ |
เคลื่อนไหวได้: | ไม่. อ่านเกี่ยวกับแอนิเมชั่น |
รุ่น: | CSS3 |
ไวยากรณ์ JavaScript: | วัตถุ .style.animationDirection="ย้อนกลับ" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
ตัวเลขตามด้วย -webkit-, -moz- หรือ -o- ระบุเวอร์ชันแรกที่ทำงานกับคำนำหน้า
Property | |||||
---|---|---|---|---|---|
animation-direction | 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
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
มูลค่าทรัพย์สิน
Value | Description | Play it |
---|---|---|
normal | Default value. The animation is played as normal (forwards) | |
reverse | The animation is played in reverse direction (backwards) | |
alternate | The animation is played forwards first, then backwards | |
alternate-reverse | The animation is played backwards first, then forwards | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
เล่นแอนิเมชั่นย้อนกลับก่อน แล้วจึงไปข้างหน้า:
div {
animation-direction: alternate-reverse;
}
ตัวอย่าง
เล่นภาพเคลื่อนไหวย้อนกลับ:
div {
animation-direction: reverse;
}
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: ภาพเคลื่อนไหว CSS
การอ้างอิง HTML DOM: คุณสมบัติ animationDirection