CSS Animation Generator

Build CSS keyframe animations with live preview.

ประเภทแอนิเมชัน

ระยะเวลา

ฟังก์ชันเวลา

การหน่วงเวลา

จำนวนครั้ง

ทิศทาง

โหมดเติม

ดูตัวอย่างสด

Box

CSS ที่สร้าง

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fadeIn 1s ease 0s 1 normal both;
}

เกี่ยวกับเครื่องมือนี้

เครื่องสร้างแอนิเมชัน CSS สร้างแอนิเมชันที่นุ่มนวลโดยการกำหนดค่า keyframe preset, เวลา, ระยะเวลา, การหน่วงเวลา และการวนซ้ำ มีตัวอย่างสดให้ดูผลแอนิเมชัน

แอนิเมชัน CSS ที่ใช้ transform และ opacity มีประสิทธิภาพเพราะถูกประมวลผลบน GPU ไม่ก่อให้เกิด layout หรือ repaint

วิธีใช้งาน

เลือกประเภทแอนิเมชันจากเมนูแบบดรอปดาวน์
ตั้งค่าระยะเวลา (เช่น 0.5s, 2s)
เลือกฟังก์ชันเวลาเพื่อควบคุม easing
ตั้งค่าการหน่วงเวลาก่อนแอนิเมชันเริ่ม (ไม่บังคับ)
ตั้งค่าจำนวนครั้ง (ตัวเลขหรือ infinite)
คลิกเล่นซ้ำเพื่อดูตัวอย่าง จากนั้นคัดลอกเพื่อส่งออก CSS

กรณีการใช้งาน

นักพัฒนา front-end ใช้แอนิเมชัน fade และ slide เพื่อปรับปรุงประสิทธิภาพที่รับรู้ นักออกแบบ UI สร้างต้นแบบ micro-interaction เช่น pulse ปุ่มและการสั่นแจ้งเตือน

คำถามที่พบบ่อย

fill-mode: both คืออะไร? — แอนิเมชันใช้สไตล์เริ่มต้นก่อนเริ่มและคงสไตล์สุดท้ายหลังสิ้นสุด นี่คือการตั้งค่าที่มีประโยชน์มากที่สุด
จะทำให้แอนิเมชันวนซ้ำตลอดไปได้อย่างไร? — ตั้งค่าจำนวนครั้งเป็น infinite
แอนิเมชัน CSS ดีกว่า JavaScript ไหม? — สำหรับเอฟเฟกต์แบบง่าย CSS ดีกว่า สำหรับลำดับที่ซับซ้อนหรือการโต้ตอบ JavaScript มีการควบคุมมากกว่า