สร้าง CSS Keyframe Animation
เครื่องมือสร้าง CSS Keyframe Animation ให้คุณเลือกรูปแบบแอนิเมชันจาก 12 สไตล์สำเร็จรูป (เฟดเข้า/ออก เลื่อนเข้าจากทั้งสี่ทิศทาง ซูมเข้า/ออก เด้งเข้า หมุนเข้า พลิกตามแกน X หรือ Y) จากนั้นปรับระยะเวลา ดีเลย์ timing function และจำนวนรอบการเล่น พร้อมภาพตัวอย่างสดและปุ่มเล่นซ้ำ คัดลอกกฎ @keyframes ที่สมบูรณ์พร้อมคลาส animation ที่พร้อมใช้งานได้ทันที การสร้างทั้งหมดทำงานในเบราว์เซอร์ — ไม่มีการอัปโหลดขึ้นเซิร์ฟเวอร์เลย
เครื่องมือออกแบบและ CSS ทำงานในเบราว์เซอร์ของคุณทั้งหมด
โค้ดถูกสร้างขึ้นทั้งหมดในเบราว์เซอร์ของคุณ — ไม่มีการส่งข้อมูลใด ๆ ไปยังเซิร์ฟเวอร์
โค้ด CSS
@keyframes uddatakAnim {
0% { opacity: 0; }
100% { opacity: 1; }
}
.animated-box {
animation: uddatakAnim 800ms ease-out 0ms 1;
}คำถามที่พบบ่อย
ได้ @keyframes และคุณสมบัติ animation รองรับในทุกเบราว์เซอร์สมัยใหม่โดยไม่ต้องใช้พรีฟิกซ์พิเศษใด ๆ
ดำเนินการต่อด้วย
เครื่องมือที่เกี่ยวข้อง
อยากลองใช้ Uddatak ไหม?
เรียกดูคลังเครื่องมือทั้งหมดและเริ่มใช้งานสิ่งที่คุณต้องการได้ทันที — ฟรีและไม่ต้องสมัครสมาชิก
ดูเครื่องมือทั้งหมด