ตัวสร้างแอนิเมชัน Keyframe CSS พร้อมตัวอย่างแบบสด
ตัวสร้างแอนิเมชัน keyframe ของ CSS สร้างบล็อก @keyframes และ animation shorthand ที่ตรงกันจากคุณสมบัติและตั้งค่าแอนิเมชันที่คุณเลือก เลือก translate, rotate, scale, opacity หรือ background แล้วให้ค่า from และ to ระยะเวลา จังหวะ และจำนวนรอบ ตัวอย่างแบบสดแสดงแอนิเมชันขณะปรับการตั้งค่า และคุณคัดลอกค่าที่สร้างได้
ตัวสร้างแอนิเมชัน keyframe ของ CSS สร้างบล็อก @keyframes และ animation shorthand จากการตั้งค่าที่คุณเลือก เลือก translate, rotate, scale, opacity หรือ background เป็นคุณสมบัติที่แอนิเมต ป้อนค่า from และ to และตั้งระยะเวลา จังหวะ และจำนวนรอบ ตัวอย่างแบบสดช่วยให้เห็นแอนิเมชันที่ได้ขณะทำงาน
การแปลงใช้การตั้งค่าเหล่านั้นเพื่อเขียนนิยาม keyframe และ animation shorthand ที่ตรงกัน คุณสมบัติที่เลือกกำหนดสิ่งที่เปลี่ยนระหว่างค่าเริ่มต้นและค่าสิ้นสุด ระยะเวลา จังหวะ และจำนวนรอบกำหนดว่าแอนิเมชันทำงานอย่างไร คุณสามารถคัดลอกค่าที่สร้างที่ต้องการสำหรับ CSS ของคุณ
keyframe ของ CSS บรรยายการเปลี่ยนแปลงระหว่างสถานะแอนิเมชัน ส่วน animation shorthand รวมการตั้งค่าแอนิเมชันไว้ในการประกาศเดียว การสร้างทั้งสองช่วยเมื่อคุณทำต้นแบบการเคลื่อนไหว เตรียมข้อมูลทดสอบ หรือเพิ่มแอนิเมชันในสไตล์ชีต ตัวอย่างให้วิธีตรวจสอบผลลัพธ์อย่างรวดเร็ว ก่อนคัดลอกโค้ด
เครื่องมือทำงานในเบราว์เซอร์ของคุณทั้งหมด ป้อนเข้าของคุณถูกประมวลผลบนอุปกรณ์และไม่ถูกส่งไปยังเซิร์ฟเวอร์ มันใช้งานออฟไลน์ได้หลังโหลดหน้าแล้ว คุณจึงใช้ต่อได้โดยไม่ต้องเชื่อมต่อ เครื่องมือนี้ฟรี
ตัวสร้างนี้มีประโยชน์สำหรับนักพัฒนาทุกระดับประสบการณ์ที่ต้องการสร้างหรือดูตัวอย่างค่าแอนิเมชัน CSS นอกจากนี้ยังช่วยวิศวกร DevOps และทีมที่เตรียมฟิกซ์เจอร์หรือข้อมูล seed ที่มีโค้ดแอนิเมชัน keyframe
ขั้นตอนที่ 1: เลือกคุณสมบัติแอนิเมชัน: translate, rotate, scale, opacity หรือ background นี่กำหนดว่าการเปลี่ยนแปลงแบบใดที่ keyframe ที่สร้างบรรยาย
ขั้นตอนที่ 2: ตั้งค่า from และ to สำหรับคุณสมบัติที่เลือก ค่าเหล่านี้นิยามสถานะเริ่มต้นและสิ้นสุดของแอนิเมชัน
ขั้นตอนที่ 3: เลือกระยะเวลา จังหวะ และจำนวนรอบ animation shorthand ที่สร้างสะท้อนการตั้งค่าเหล่านี้
ขั้นตอนที่ 4: สร้าง CSS และตรวจสอบตัวอย่างแบบสดเพื่อดูผลลัพธ์
ขั้นตอนที่ 5: คัดลอกบล็อก @keyframes, animation shorthand หรือค่าที่สร้างใด ๆ ที่ต้องการ
กรณีการใช้งาน: สร้างค่าแอนิเมชัน keyframe พร้อมใช้สำหรับการทดสอบ ฟิกซ์เจอร์ หรือข้อมูล seed แล้วคัดลอก CSS ที่สร้างลงในโปรเจกต์ของคุณ
กรณีการใช้งาน: สร้างค่าแอนิเมชันทั้งชุดพร้อมกันแทนการคิดค่าด้วยมือ
กรณีการใช้งาน: ได้ค่าแบบสุ่มที่ถูกต้องแทนการพึ่งการเดาที่พิมพ์จากคีย์บอร์ด
กรณีการใช้งาน: ดูตัวอย่างแอนิเมชัน CSS ขณะเลือกคุณสมบัติและค่า from/to ช่วยตรวจสอบผลลัพธ์ก่อนคัดลอกโค้ด
กรณีการใช้งาน: สร้างบล็อก @keyframes และ animation shorthand สำหรับต้นแบบ UI โดยไม่ต้องเขียนทั้งสองส่วนตั้งแต่ต้น
กรณีการใช้งาน: เตรียมโค้ดแอนิเมชันสำหรับสไตล์ชีตโดยสร้าง keyframe และ shorthand พร้อมกัน