มี CSS animation properties อะไรบ้าง?

properties หลัก: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction

สร้าง keyframes อย่างไร?

กำหนด @keyframes ด้วย start (0% หรือ from), end (100% หรือ to) และเปอร์เซ็นต์ระหว่างกลางเลือกได้

timing functions คืออะไร?

Timing functions ควบคุมความเร็ว: ease, linear, ease-in, ease-out, ease-in-out หรือ cubic-bezier กำหนดเอง

ทำ animations แบบไม่จำกัดได้ไหม?

ได้ ตั้ง animation-iteration-count: infinite สำหรับ looping animations ต่อเนื่อง

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

เครื่องมือสร้าง CSS animation ระดับมืออาชีพ พร้อมอนิเมชันพรีเซ็ต 12+ รายการ สร้าง fadeIn, slideIn, bounce, zoom และอื่นๆ ด้วยคอนโทรลภาพ พรีวิวแบบเรียลไทม์ โค้ด CSS พร้อมคัดลอก และฟังก์ชัน timing ที่ปรับแต่งได้ เหมาะสำหรับนักพัฒนาและนักออกแบบเว็บ ไม่ต้องสมัครสมาชิก

รูปแบบแอนิเมชั่น

ระยะเวลา (Duration) (s)

เวลาหน่วง (Delay) (s)

รูปแบบความเร็ว (Timing Function)

จำนวนรอบการเล่น

ทิศทางการเล่น

สถานะเมื่อจบ (Fill Mode)

ดูตัวอย่าง

โค้ด CSS

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animated-element {
  animation: fadeIn 1s ease 0s 1 normal none running;
}

เกี่ยวกับ

สร้าง CSS Animation ที่สวยงามด้วยเครื่องมือสร้างแบบโต้ตอบของเรา เลือกจากรูปแบบแอนิเมชั่นที่หลากหลาย ปรับแต่งเวลา ระยะเวลา และรับโค้ด CSS พร้อมดูตัวอย่างได้ทันที

• มีรูปแบบแอนิเมชั่นสำเร็จรูปให้เลือกถึง 12 แบบ
• ควบคุมเวลา ความยาว และจำนวนรอบได้อย่างอิสระ
• สร้างโค้ด CSS พร้อม Keyframes ได้ทันที

Loading tool...