คุณสมบัติ animation

คุณสมบัติ animation เป็นคุณสมบัติ ชวเลขสำหรับภาพเคลื่อนไหว ช่วยให้กำหนด คุณสมบัติทั้งหมดสำหรับภาพเคลื่อนไหวได้พร้อมกัน: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

ลำดับของค่าไม่มีความสำคัญ เวลาดำเนินการ ของภาพเคลื่อนไหว animation-duration ต้อง อยู่ก่อนความล่าช้า animation-delay อย่างแน่นอน คุณสมบัติที่จำเป็นมีเพียง animation-name และ animation-duration เท่านั้น

คุณสมบัตินี้อาจรับค่า none ได้ด้วย ซึ่งจะปิดการทำงานของภาพเคลื่อนไหวทั้งหมด ค่า นี้เป็นค่าเริ่มต้น

ไวยากรณ์

cssตัวเลือก {
  animation: ค่า;
}

ตัวอย่าง

ในตัวอย่างนี้ จะมีความล่าช้า 3 วินาทีก่อนเริ่มภาพเคลื่อนไหว (ก่อนการเล่นแต่ละครั้งใหม่) จากนั้นภาพเคลื่อนไหวจะเล่นเป็นเวลา 6 วินาที:

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0px;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  animation: move 6s infinite 3s linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

ตัวอย่าง . ปัญหาที่อาจเกิดขึ้น

ภาพเคลื่อนไหวที่เขียนในรูปแบบย่ออาจ ไม่ทำงานเนื่องจากชื่อของมัน ลองดู ภาพเคลื่อนไหวต่อไปนี้:

css@keyframes reverse {
  from {
    left: 0;
  }
  to {
    left: 300px;
  }
}

สังเกตว่าผมใช้ชื่อภาพเคลื่อนไหว reverse เมื่อดูครั้งแรก ทุกอย่างดูดี แต่ภาพเคลื่อนไหว ไม่ทำงาน เพราะ reverse เป็น คำหลักที่ถูกต้องสำหรับคุณสมบัติ animation-direction

ภาพเคลื่อนไหวจะไม่ทำงานเมื่อใช้ ในรูปแบบย่อหากมีคำหลักอื่น ๆ ในชื่อด้วย แต่ทุกอย่างทำงานดีเมื่อใช้ รูปแบบ "เต็ม" ในการอธิบาย

คำหลัก-ค่าของ animation-direction ที่ทำให้ภาพเคลื่อนไหวเสีย รวมถึงคำหลัก ที่เกี่ยวข้องกับฟังก์ชันปรับให้เรียบ และ infinite, alternate, running, paused และอื่น ๆ ด้วย

ดูเพิ่มเติม