เครื่องมือสร้างภาพเคลื่อนไหวคีย์เฟรม CSS

กฎ CSS @keyframes นั้นเป็นไทม์ไลน์เล็กๆ จริงๆ ซึ่งเป็นชุดของจุดตรวจสอบเปอร์เซ็นต์ โดยแต่ละจุดจะประกาศว่าคุณสมบัติควรมีลักษณะอย่างไรในขณะนั้น โดยที่เบราว์เซอร์จะสอดแทรกทุกสิ่งที่อยู่ระหว่างนั้น การสร้างจุดตรวจด้วยมือหมายถึงการเก็บจุดตรวจหลายเปอร์เซ็นต์ไว้ในหัวของคุณพร้อมๆ กันในที่พักหลายแห่ง เครื่องมือสร้างนี้จะเปลี่ยนไทม์ไลน์นั้นเป็นสิ่งที่คุณสามารถเห็นและลากได้จริง: เลนแนวนอนหนึ่งเลนต่อที่พัก โดยมีเครื่องหมายหยุดที่ทุกจุดตรวจ

แกนกลางคือสครับเพลย์เฮด ลากไปยังจุดใดก็ได้ระหว่าง 0% ถึง 100% และกล่องแสดงตัวอย่างจะข้ามไปยังสถานะรวมที่แน่นอนในทันที ไม่ใช่คีย์เฟรมที่ใกล้ที่สุด แต่เป็นค่าที่ประมาณค่าเชิงเส้นตรงจริงซึ่งคำนวณระหว่างจุดสองจุดใดก็ตามที่ล้อมรอบส่วนหัวของตัวควบคุมการเล่นในทุกแทร็กที่ใช้งานอยู่ คุณสมบัติตัวเลข เช่น ตำแหน่ง การหมุน และมาตราส่วน จะประมาณค่าเป็นตัวเลขธรรมดา สีพื้นหลังจะสอดแทรกแต่ละช่องสีแดง เขียว และน้ำเงินอย่างอิสระ ซึ่งทำให้แทร็กสีจางลงอย่างราบรื่นผ่านเฉดสีกลาง แทนที่จะข้ามไปมาระหว่างสีที่คุณตั้งค่าไว้จริง

แทร็กหลายแทร็กรวมกันเป็นแอนิเมชั่นที่เชื่อมโยงกันโดยอัตโนมัติ: คุณสมบัติตามการแปลงทุกรายการ (ย้าย หมุน ปรับขนาด) ผสานเข้าเป็นการประกาศการแปลงเดี่ยวที่เปอร์เซ็นต์คีย์เฟรมแต่ละเปอร์เซ็นต์ ในขณะที่ความทึบและสีพื้นหลังยังคงอยู่ในบรรทัดของตัวเอง เหมือนกับ CSS ที่เขียนด้วยลายมือจริงทุกประการ เปอร์เซ็นต์ที่แทร็กที่กำหนดไม่มีการหยุดอย่างชัดเจนจะถูกละเว้นจากการประกาศของคุณสมบัตินั้นโดยตั้งใจ การแก้ไขคีย์เฟรมของเบราว์เซอร์เองจะเติมช่องว่างระหว่างจุดหยุดใดก็ตามที่มีอยู่ เช่นเดียวกับที่ทำกับกฎ @keyframes ใดๆ ที่คุณพิมพ์ด้วยมือ

ค่าที่ตั้งล่วงหน้าห้าแบบ — เด้ง เขย่า ชีพจร จาง และเลื่อนเข้า — โหลดไทม์ไลน์ที่สมบูรณ์และพร้อมสำหรับการปรับแต่ง (รวมถึงระยะเวลาที่เหมาะสม ฟังก์ชันจับเวลา และการนับซ้ำ) ได้ในคลิกเดียว กดเล่นที่จุดใดก็ได้เพื่อดูภาพเคลื่อนไหว CSS จริงที่ทำงานบนองค์ประกอบแสดงตัวอย่าง ซึ่งสร้างขึ้นทันทีผ่านสไตล์ชีตที่แทรกแบบไดนามิก จากนั้นคัดลอกบล็อก @keyframes แบบเต็มบวกกับ .animated-element { ภาพเคลื่อนไหว: ... } ชวเลขลงในโปรเจ็กต์ของคุณเองโดยตรง เช่นเดียวกับเครื่องมืออื่นๆ บนไซต์นี้ เครื่องมือทั้งหมดทำงานในเบราว์เซอร์โดยไม่มีการอัปโหลดเลย