เครื่องกำเนิด CSS Animation สำหรับคนขี้เกียจ
ภาพเคลื่อนไหว CSS
CSS อนุญาตให้แอนิเมชั่นขององค์ประกอบ HTML โดยไม่ต้องใช้ JavaScript หรือ Flash
ในบทนี้ คุณจะได้เรียนรู้เกี่ยวกับคุณสมบัติดังต่อไปนี้:
- @คีย์เฟรม
- แอนิเมชั่น-ชื่อ
- แอนิเมชั่น-duration
- แอนิเมชั่น-ล่าช้า
- แอนิเมชั่น-การวนซ้ำ-นับ
- แอนิเมชั่น-ทิศทาง
- แอนิเมชั่น-จับเวลา-ฟังก์ชั่น
- แอนิเมชั่นเติมโหมด
- แอนิเมชั่น
คำนำหน้าเฉพาะเบราว์เซอร์
เบราว์เซอร์รุ่นเก่าบางตัวต้องการคำนำหน้าเฉพาะ (-webkit-) เพื่อทำความเข้าใจคุณสมบัติของแอนิเมชั่น
ภาพเคลื่อนไหว CSS คืออะไร?
ภาพเคลื่อนไหวช่วยให้องค์ประกอบค่อยๆ เปลี่ยนจากรูปแบบหนึ่งเป็นอีกรูปแบบหนึ่ง
คุณสามารถเปลี่ยนคุณสมบัติ CSS ได้มากเท่าที่ต้องการ กี่ครั้งก็ได้ตามต้องการ
หากต้องการใช้ภาพเคลื่อนไหว CSS คุณต้องระบุคีย์เฟรมสำหรับภาพเคลื่อนไหวก่อน
คีย์เฟรมถือสไตล์ที่องค์ประกอบจะมีในบางช่วงเวลา
กฎ @คีย์เฟรม
เมื่อคุณระบุสไตล์ CSS ภายในกฎ @keyframes ภาพเคลื่อนไหวจะค่อยๆ เปลี่ยนจากสไตล์ปัจจุบันเป็นสไตล์ใหม่ในบางช่วงเวลา
