เครื่องมือสร้างภาพเคลื่อนไหว CSS3 ออนไลน์

Animation

เครื่องกำเนิด CSS Animation สำหรับคนขี้เกียจ

ภาพเคลื่อนไหว CSS

CSS อนุญาตให้แอนิเมชั่นขององค์ประกอบ HTML โดยไม่ต้องใช้ JavaScript หรือ Flash

ในบทนี้ คุณจะได้เรียนรู้เกี่ยวกับคุณสมบัติดังต่อไปนี้:

  • @คีย์เฟรม
  • แอนิเมชั่น-ชื่อ
  • แอนิเมชั่น-duration
  • แอนิเมชั่น-ล่าช้า
  • แอนิเมชั่น-การวนซ้ำ-นับ
  • แอนิเมชั่น-ทิศทาง
  • แอนิเมชั่น-จับเวลา-ฟังก์ชั่น
  • แอนิเมชั่นเติมโหมด
  • แอนิเมชั่น

คำนำหน้าเฉพาะเบราว์เซอร์

เบราว์เซอร์รุ่นเก่าบางตัวต้องการคำนำหน้าเฉพาะ (-webkit-) เพื่อทำความเข้าใจคุณสมบัติของแอนิเมชั่น

 

ภาพเคลื่อนไหว CSS คืออะไร?

ภาพเคลื่อนไหวช่วยให้องค์ประกอบค่อยๆ เปลี่ยนจากรูปแบบหนึ่งเป็นอีกรูปแบบหนึ่ง

คุณสามารถเปลี่ยนคุณสมบัติ CSS ได้มากเท่าที่ต้องการ กี่ครั้งก็ได้ตามต้องการ

หากต้องการใช้ภาพเคลื่อนไหว CSS คุณต้องระบุคีย์เฟรมสำหรับภาพเคลื่อนไหวก่อน

คีย์เฟรมถือสไตล์ที่องค์ประกอบจะมีในบางช่วงเวลา

 

กฎ @คีย์เฟรม

เมื่อคุณระบุสไตล์ CSS ภายในกฎ @keyframes ภาพเคลื่อนไหวจะค่อยๆ เปลี่ยนจากสไตล์ปัจจุบันเป็นสไตล์ใหม่ในบางช่วงเวลา