UTILS.
เป็นส่วนตัวตั้งแต่เริ่ม
⤿

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

สร้างแอนิเมชัน keyframe ดูตัวอย่างแบบเรียลไทม์แล้วคัดลอก CSS

ไฟล์ของคุณอยู่ในอุปกรณ์นี้

ไฟล์ประมวลผลในเบราว์เซอร์และไม่ถูกอัปโหลด เว็บไซต์จะดาวน์โหลดโค้ดและทรัพยากรที่จำเป็นต่อเครื่องมือ ไม่ต้องมีบัญชีและไม่มีตัวติดตาม

ใช้ปุ่มดาวน์โหลดเพื่อบันทึกเครื่องมือนี้เป็นไฟล์ HTML ไฟล์เดียวสำหรับใช้ออฟไลน์

ความเป็นส่วนตัว →

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

เลือกแอนิเมชันสำเร็จรูปพร้อมระยะเวลา, ฟังก์ชัน timing และจำนวนรอบ ดูการทำงานแบบเรียลไทม์ แล้วคัดลอกกฎ @keyframes และ animation ทั้งหมดทำงานในเบราว์เซอร์ของคุณ

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

จำนวนรอบควบคุมอะไร?
กำหนดจำนวนครั้งที่แอนิเมชันเล่น เลือก infinite เพื่อวนซ้ำไม่รู้จบ หรือใส่ตัวเลขเพื่อให้เล่นตามจำนวนนั้น
ฉันจะเริ่มแอนิเมชันใหม่ได้อย่างไร?
กด เล่นซ้ำ — ระบบจะลบและนำแอนิเมชันกลับมาใช้ใหม่ชั่วครู่ เพื่อให้ตัวอย่างเล่นอีกครั้งตั้งแต่ keyframe แรก

เครื่องมือเพิ่มเติม