เครื่องมือสร้าง CSS Animation

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}

.animated-element {
  animation: bounce 1s ease 0s infinite normal none;
}

เครื่องมือสร้าง CSS Animation ฟรี

สร้าง CSS animation พร้อมตัวอย่างแบบเรียลไทม์และส่งออกโค้ด

เคล็ดลับ

• ใช้ ease-in-out สำหรับแอนิเมชันที่ลื่นไหล
• แอนิเมชัน UI ควรต่ำกว่า 300ms
• ใช้ transform และ opacity เพื่อประสิทธิภาพ
• forwards รักษาสถานะสุดท้าย
• ใช้ animation-delay เพื่อกระจาย

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

เครื่องมือที่เกี่ยวข้อง