a11y.skipToMainContent
1

กรอบกุญแจ CSS

เลือกภาพเคลื่อนไหวแบบชุดสําเร็จรูป, ปรับจังหวะ, ดูมันทํางานสด, และคัดลอกทั้งบล็อก@คีย์เฟรมส์ และตัวย่อแอนิเมชัน.

Animation

s
s

Preview

PLAY

CSS

Was this tool helpful?
Send output to:
Advertisement

How to use Keyframes Animation Generator

  1. คลิกภาพเคลื่อนไหวชุดสําเร็จรูป เช่น ค่อย ๆ จางหาย, เด้งหรือหมุน.
  2. ตั้งค่าช่วงเวลา, การทํางานของเวลา, หน่วงเวลา, จํานวนตัวเยื้อง, ทิศทาง และโหมดการเติม.
  3. ดูตัวอย่างการทํางาน และกด replay เพื่อทําซ้ํา.
  4. คลิกสําเนา CSS เพื่อจับบล็อก@keyเฟรมและแอนิเมชัน.

อะไรคือ?

เครื่องเร่งอนุภาคคีย์ (Keyเฟรม) สร้างความพร้อมใช้งาน CSS เครื่องมือนี้ทํางานในเบราว์เซอร์ของคุณทั้งหมด และส่งผลลัพธ์ออกมาทั้งแบบเต็ม < code> @คีย์เฟรมส์ (Code) นิยามและการจับคู่ที่เข้าคู่กับ distribution, คุณสามารถวางแบบเคลื่อนไหวที่สมบูรณ์ และทํางานได้ตรงเข้าไปในสไตล์ชีตของคุณ

Advertisement

FAQ

อะไรคือความแตกต่างระหว่าง @keyเฟรมส์ กับคุณสมบัติแอนิเมชัน?
[คีย์เฟรมจะกําหนดการเปลี่ยนแปลงระหว่างการแอนิเมชัน (จาก// ถึง หรือเปอร์เซ็นต์ขั้นตอน) ขณะที่การย่อส่วนของแอนิเมชันบอกองค์ประกอบซึ่งกรอบกุญแจที่จะใช้ คุณต้องใช้ทั้งสองแบบ สําหรับงานแอนิเมชัน.
ผมจะทําให้แอนิเมชันเล่นแค่ครั้งเดียวหรือวนตลอดไปได้อย่างไร?
ตั้งค่าจํานวนการเริ่มระบบเป็นหมายเลขเช่น 1 สําหรับการทํางานครั้งเดียว หรือกาเลือก 'infinite' เพื่อวนรอบตลอดไป นี่เป็นแผนที่ของค่าจํานวนตัวอักษรแบบเคลื่อนไหว.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

← Back to Developer Tools · All tags

Last updated:

Advertisement