คุณสมบัติ animation CSS
- หน้าก่อน all
- หน้าต่อไป animation-delay
การเรียกใช้และความหมาย
animation attribute คือ attribute ที่ใช้เรียกย่อ สำหรับตั้งค่าหก attribute แอนิเมชัน：
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
หมายเหตุ：ให้กำหนดเสมอ animation-duration หากไม่มีค่าของ属性 จะมีเวลายาวนี้ จะไม่เล่นแอนิเมชัน
ดูเพิ่มเติมที่：
ตัวเรียก CSS3：CSS แอนิเมชัน
HTML DOM คู่มืออ้างอิง：animation 属性
ตัวอย่าง
ใช้คุณสมบัติสั้นๆ เพื่อเชื่อมโยง animation กับตัวเลือก div:
div
{
animation:mymove 5s infinite;
}
การเขียน CSS
animation: name duration timing-function delay iteration-count direction;
| ค่า | คำอธิบาย |
|---|---|
| animation-name | กำหนดชื่อ keyframe ที่ต้องการเชื่อมโยงกับเลือกตัว |
| animation-duration | กำหนดช่วงเวลาที่ใช้เพื่อเสร็จการปฏิบัติ animation ด้วยวินาทีหรือมิลลิวินาที |
| animation-timing-function | กำหนดแนวทางการเรียกเริ่มการปฏิบัติ |
| animation-delay | กำหนดช่วงเวลาที่เลื่อนมาก่อนที่จะเริ่มการปฏิบัติ |
| animation-iteration-count | กำหนดครั้งที่ animation จะต้องเล่น |
| animation-direction | กำหนดว่าควรที่จะทำการเล่นภาพยนตร์ซ้ำโดยทำการเล่นภาพยนตร์ตามที่แนะนำ |
| animation-fill-mode | กำหนดค่าที่ถูกใช้ในช่วงที่ไม่มีการปฏิบัติ |
| animation-play-state | กำหนดว่าการปฏิบัติที่เรียกว่า animation กำลังทำงานหรือหยุด |
รายละเอียดเทคนิค
| ค่าเริ่มต้น: | none 0 ease 0 1 normal |
|---|---|
| ทางเลือกถึงทางเลือก: | no |
| เวอร์ชั่น: | CSS3 |
| JavaScript กรรมวิธี: | object.style.animation="mymove 5s infinite" |
การสนับสนุนโดยเบราเซอร์
ตัวเลขในตารางระบุสมรรถนะของเบราเซอร์ที่สนับสนุนคุณสมบัตินี้เต็มที่ในฐานะแรก
ตัวเลขที่มี -webkit- หรือ -moz- หรือ -o- หมายถึงสมรรถนะของการใช้เนื้อที่มีเปรียบด้านสากลในฐานะแรก
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 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- |
- หน้าก่อน all
- หน้าต่อไป animation-delay
