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

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

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

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

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