ตัวสร้างแอนิเมชัน CSS
CSS Animation Generator สร้างแอนิเมชัน @keyframes จาก 14 preset เช่น fade in, slide in, bounce in, pulse, spin, shake และ zoom พร้อมปรับระยะเวลา timing function และจำนวนรอบได้
เกี่ยวกับเครื่องมือนี้
CSS Animation Generator สร้างแอนิเมชัน @keyframes จาก 14 preset เช่น fade in, slide in, bounce in, pulse, spin, shake และ zoom พร้อมปรับระยะเวลา timing function และจำนวนรอบได้
วิธีใช้
- เลือก preset แอนิเมชัน
- ตั้งค่าระยะเวลา timing function และจำนวนรอบ
- กด Replay เพื่อดูพรีวิว
- คลิก Copy CSS เพื่อรับ @keyframes และกฎ animation
ข้อควรรู้
- แอนิเมชัน CSS มีสองส่วน คือกฎ @keyframes และ property animation บน element
- การทำแอนิเมชันกับ transform และ opacity มักลื่นไหลที่สุดในแง่ประสิทธิภาพ
- timing function อย่าง ease-out เริ่มเร็วแล้วค่อยๆ ช้าลง ให้ความรู้สึกเป็นธรรมชาติสำหรับเอฟเฟกต์ตอนเข้า
- ควรเคารพ media query prefers-reduced-motion สำหรับผู้ใช้ที่ต้องการให้มีการเคลื่อนไหวน้อยลง
- จำนวนรอบแบบ infinite เหมาะกับ loader ส่วนเอฟเฟกต์ตอนเข้ามักเล่นเพียงครั้งเดียว
ทำงานในเบราว์เซอร์ของคุณทั้งหมด — ข้อมูลที่คุณป้อนจะไม่ถูกอัปโหลดหรือจัดเก็บ
คำถามที่พบบ่อย
สร้างแอนิเมชัน CSS อย่างไร?
กำหนดการเคลื่อนไหวในกฎ @keyframes แล้วผูกกับ element ด้วย animation: name duration timing iteration เครื่องมือนี้เขียนให้ทั้งสองส่วน
CSS transition กับ animation ต่างกันอย่างไร?
transition ทำแอนิเมชันระหว่างสองสถานะเมื่อ property เปลี่ยน เช่น ตอน hover ส่วน animation ใช้ keyframes เล่นได้เองอัตโนมัติ และวนซ้ำได้
ทำให้แอนิเมชันวนซ้ำไม่สิ้นสุดอย่างไร?
ตั้งจำนวนรอบเป็น infinite เช่น animation: spin 1s linear infinite
แอนิเมชัน CSS มีผลต่อการเข้าถึง (accessibility) ไหม?
การเคลื่อนไหวขนาดใหญ่หรือต่อเนื่องอาจรบกวนผู้ใช้บางคน ควรครอบแอนิเมชันที่ไม่จำเป็นไว้ใน @media (prefers-reduced-motion: no-preference)