CSS3 animation Property

❮ก่อนหน้า ถัดไป❯

ตัวอย่าง

ผูกนิเมชั่นไปยัง <div> องค์ประกอบโดยใช้สถานที่ให้บริการจดชวเลข:

div {
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}

ลองตัวเอง»

ความหมายและการใช้งาน

คุณสมบัติการเคลื่อนไหวเป็นที่พักชวเลขแปดของคุณสมบัติการเคลื่อนไหว:

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state

Note: เสมอระบุคุณสมบัตินิเมชั่นระยะเวลามิฉะนั้นระยะเวลาเป็น 0 และจะไม่สามารถเล่นได้

ค่าเริ่มต้น:	none 0 ease 0 1 normal none running
รับการถ่ายทอด:	no
Animatable:	no. Read about animatable
เวอร์ชัน:	CSS3
ไวยากรณ์ javascript:	object .style.animation="mymove 5s infinite" Try it

สนับสนุนเบราว์เซอร์

ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน

ตามด้วยหมายเลข -webkit-, -moz- หรือ -o- ระบุรุ่นแรกที่ทำงานร่วมกับคำนำหน้า

คุณสมบัติ
animation	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:name duration timing-function delay iteration-count direction fill-mode play-state;

ค่าทรัพย์สิน

ความคุ้มค่า	ลักษณะ
animation-name	ระบุชื่อของคีย์เฟรมที่คุณต้องการเชื่อมโยงกับตัวเลือก
animation-duration	ระบุวิธีการหลายวินาทีหรือมิลลิวินาทีภาพเคลื่อนไหวจะเสร็จสมบูรณ์
animation-timing-function	ระบุโค้งความเร็วของภาพเคลื่อนไหว
animation-delay	ระบุล่าช้าก่อนการเคลื่อนไหวจะเริ่มต้น
animation-iteration-count	ระบุจำนวนครั้งที่เคลื่อนไหวควรจะเล่น
animation-direction	ระบุหรือไม่ว่าการเคลื่อนไหวควรจะเล่นในสิ่งที่ตรงกันข้ามในรอบอื่น
animation-fill-mode	ระบุสิ่งที่มีค่าถูกนำมาใช้โดยการเคลื่อนไหวนอกเวลาที่กำลังดำเนินการ
animation-play-state	ระบุว่านิเมชั่นที่กำลังทำงานหรือหยุดชั่วคราว
initial	การตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น อ่านเกี่ยวกับการเริ่มต้น
inherit	สืบทอดคุณสมบัตินี้จากองค์ประกอบหลักของมัน อ่านเกี่ยวกับการรับมรดก

หน้าเว็บที่เกี่ยวข้อง

กวดวิชา CSS3: CSS3 ภาพเคลื่อนไหว

อ้างอิง HTML DOM: animation property