ตัวอย่าง
เปลี่ยนภาพเคลื่อนไหวที่ <div> องค์ประกอบโดยใช้สถานที่ให้บริการจดชวเลข:
// Code for Chrome, Safari and Opera
document.getElementById("myDIV").style.WebkitAnimation = "mynewmove 4s 2";
// Standard syntax
document.getElementById("myDIV").style.animation =
"mynewmove 4s 2"; ลองตัวเอง» ความหมายและการใช้งาน
คุณสมบัติการเคลื่อนไหวเป็นที่พักจดชวเลขหกของคุณสมบัติการเคลื่อนไหว:
animationName
animationDuration
animationTimingFunction
animationDelay
animationIterationCount
animationDirection
Note: เสมอระบุคุณสมบัติ animationDuration มิฉะนั้นระยะเวลาเป็น 0 และจะไม่สามารถเล่นได้
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
ตามด้วยหมายเลข Webkit, Moz หรือ O ระบุรุ่นแรกที่ทำงานร่วมกับคำนำหน้า
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| animation | 43.0 4.0 Webkit | 10.0 | 16.0 5.0 Moz | 4.0 Webkit | 30.0 15.0 Webkit 12.1 12.0 -o- |
หมายเหตุ: Chrome, Safari และ Opera สนับสนุนทางเลือกคุณสมบัติ WebkitAnimation
วากยสัมพันธ์
คืนทรัพย์สินภาพเคลื่อนไหว:
object .style.animation ตั้งค่าคุณสมบัติการเคลื่อนไหว:
object .style.animation=" ค่าทรัพย์สิน ความคุ้มค่า ลักษณะ animationName ระบุชื่อของคีย์เฟรมที่คุณต้องการที่จะผูกกับตัวเลือก animationDuration ระบุวิธีการหลายวินาทีหรือมิลลิวินาทีภาพเคลื่อนไหวจะเสร็จสมบูรณ์
animationTimingFunction ระบุโค้งความเร็วของภาพเคลื่อนไหว animationDelay ระบุความล่าช้าก่อนการเคลื่อนไหวจะเริ่มต้น
animationIterationCount ระบุจำนวนครั้งที่เคลื่อนไหวควรจะเล่น animationDirection ระบุหรือไม่ว่าการเคลื่อนไหวควรจะเล่นในสิ่งที่ตรงกันข้ามในรอบอื่น animationFillMode ระบุสิ่งที่มีค่าถูกนำมาใช้โดยการเคลื่อนไหวนอกเวลาที่มันจะดำเนินการ animationPlayState ระบุว่าการเคลื่อนไหวที่กำลังทำงานหรือหยุดชั่วคราว initial ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น อ่านเกี่ยวกับการเริ่มต้น inherit สืบทอดคุณสมบัตินี้จากองค์ประกอบหลักของมัน อ่านเกี่ยวกับการรับมรดก
รายละเอียดทางเทคนิค
ราคาเริ่มต้น: ไม่มีความสะดวก 0 0 1 ปกติไม่มีการทำงาน กลับค่า: สตริงที่เป็นตัวแทนของแอนิเมชั่ทรัพย์สินขององค์ประกอบ CSS รุ่น CSS3
หน้าเว็บที่เกี่ยวข้อง
อ้างอิง CSS: animation property
<สไตล์วัตถุ