🎬 ตัวสร้าง Keyframe CSS
ออกแบบแอนิเมชัน CSS keyframe ได้ในไม่กี่วินาที — ตั้งค่า transform และ opacity ที่แต่ละจุด ดูตัวอย่างแอนิเมชันแบบเรียลไทม์ และคัดลอกโค้ด @keyframes ที่พร้อมใช้งานได้ทันที ไม่จำเป็นต้องติดตั้ง ไม่ต้องลงทะเบียน ทำงานได้ทั้งหมดในเบราว์เซอร์ของคุณ
ออกแบบมาเพื่อความเป็นส่วนตัว. เครื่องมือนี้ทำงานทั้งหมดในเบราว์เซอร์ของคุณ — ข้อมูลที่คุณป้อนไม่ได้ถูกอัปโหลดหรือเก็บไว้ และยังสามารถใช้งานได้โดยไม่ต้องเชื่อมต่ออินเทอร์เน็ต
เกี่ยวกับ
เครื่องมือสร้าง Keyframe CSS ช่วยให้คุณสร้าง @keyframes animation โดยไม่ต้องเขียนโค้ดเดี่ยวๆ ด้วยตัวเอง คุณสามารถกำหนดคุณสมบัติ transform — translate (X และ Y), scale, และ rotate — รวมถึงค่าความโปร่งใส (opacity) ที่จุดสำคัญ 3 จุด ได้แก่ 0%, 50%, และ 100% ระยะเวลาการแอนิเมต ฟังก์ชันการกำหนดเวลา (ease, linear, ease-in, ease-out, ease-in-out หรือ cubic-bezier แบบกำหนดเอง) และจำนวนครั้งในการเล่นซ้ำ (จำกัดหรือไม่จำกัด) สามารถปรับแต่งได้ในแผงควบคุม พรีวิวแบบแอนิเมตแบบเรียลไทม์จะอัปเดตทันที เพื่อให้คุณปรับค่าต่างๆ จนกว่าการเคลื่อนไหวจะรู้สึกถูกต้อง เมื่อพร้อมแล้ว ให้คลิก Copy และบล็อก @keyframes ทั้งหมด — รวมถึงการเขียนสั้นสำหรับแอนิเมต — จะถูกวางไว้ในคลิปบอร์ดของคุณพร้อมสำหรับการวางในไฟล์สไตล์ชีตของคุณ ทุกอย่างทำงานในเบราว์เซอร์โดยไม่ต้องอัปโหลดไฟล์ใดๆ และไม่มีข้อมูลถูกส่งไปที่ใด
วิธีใช้งาน
- ตั้งค่าค่า transform — แปลง X/Y, ขยาย, และหมุน — และความโปร่งใสสำหรับจุดหยุด 0% (จุดเริ่มต้นของการเคลื่อนไหว)
- ปรับค่าจุดหยุด 50% เพื่อกำหนดจุดกึ่งกลางของการเคลื่อนไหว หรือปล่อยให้อยู่ในค่าเริ่มต้นเพื่อสร้างการเปลี่ยนผ่านแบบสองสถานะที่ง่าย
- ตั้งค่าจุดหยุด 100% สำหรับสถานะปลายทาง จากนั้นกำหนดระยะเวลา (ในวินาที) ฟังก์ชันเวลา และจำนวนการซ้ำ
- ดูการเปลี่ยนแปลงแบบเรียลไทม์ในตัวอย่างล่วงหน้าและปรับแต่งค่าใดๆ จนกว่าการเคลื่อนไหวจะดูถูกต้องตามที่คุณต้องการ
- คลิกที่ 'คัดลอก CSS' เพื่อคัดลอกบล็อก @keyframes ทั้งหมดและคุณสมบัติ animation ไปยังคลิปบอร์ดของคุณ จากนั้นวางโค้ดตรงเข้าไปในไฟล์สไตล์ของคุณ
คำถามที่พบบ่อย
- คุณสามารถเคลื่อนไหวคุณสมบัติ transform ได้แบบใด?
- คุณสามารถเคลื่อนไหว translateX, translateY, scale, และ rotate รวมถึงความโปร่งใส คุณสมบัติแต่ละอย่างถูกตั้งค่าแยกกันที่จุดหยุด keyframe 0%, 50%, และ 100%
- มีฟังก์ชันเวลาแบบใดให้ใช้งาน?
- เครื่องสร้างมีตัวเลือก preset ที่รวม ease, linear, ease-in, ease-out, และ ease-in-out รวมถึงตัวเลือก cubic-bezier แบบกำหนดเอง เพื่อให้คุณสามารถสร้างเส้นโค้งความเร็วที่เป็นเอกลักษณ์ได้
- ฉันสามารถทำให้การเคลื่อนไหววนซ้ำตลอดเวลาได้ไหม?
- ได้ ตั้งค่าจำนวนการซ้ำเป็น Infinite และโค้ด CSS ที่สร้างขึ้นจะใช้ animation-iteration-count: infinite ทำให้การเคลื่อนไหววนซ้ำต่อเนื่อง
- ฉันจำเป็นต้องรู้ CSS เพื่อใช้เครื่องมือนี้ไหม?
- ไม่จำเป็น เครื่องสร้างนี้เป็นแบบภาพทั้งหมด — เพียงแค่เลื่อนแถบและเลือกค่าจากเมนูแบบเลือก โค้ด CSS จะถูกสร้างขึ้นโดยอัตโนมัติและพร้อมสำหรับการคัดลอกไปยังโครงการใดๆ
- CSS ที่สร้างขึ้นนั้นเข้ากันได้กับเบราว์เซอร์รุ่นใหม่ทั้งหมดหรือไม่?
- ใช่ ผลลัพธ์ใช้ @keyframes มาตรฐานและคุณสมบัติ animation แบบย่อ ซึ่งได้รับการสนับสนุนในเบราว์เซอร์รุ่นใหม่ทั้งหมด เช่น Chrome, Firefox, Safari, และ Edge โดยไม่มีการเพิ่มคำนำหน้าสำหรับผู้ให้บริการใดๆ
- เครื่องมือนี้จะอัปโหลดข้อมูลของฉันหรือไม่?
- ไม่ ทุกอย่างทำงานในเบราว์เซอร์ของคุณ ดังนั้นข้อมูลของคุณจึงไม่เคยออกจากอุปกรณ์ของคุณ — และหลังจากโหลดหน้าแล้วยังใช้งานแบบออฟไลน์ได้ด้วย