เครื่องมือสร้าง CSS Animation
สร้าง CSS animation (@keyframes) ได้อย่างง่ายดาย
มาพร้อมกับ 12 รูปแบบสำเร็จรูป ปรับแต่งพารามิเตอร์ และดูตัวอย่างแบบเรียลไทม์
การตั้งค่าแอนิเมชัน
แสดงโค้ด CSS
เกี่ยวกับเครื่องมือสร้าง CSS Animation
"เครื่องมือสร้าง CSS Animation" เป็นเครื่องมือฟรีที่ช่วยให้คุณสร้างแอนิเมชัน CSS @keyframes และดูการเคลื่อนไหวได้แบบมองเห็นภาพ พร้อมสร้างโค้ด CSS ให้โดยอัตโนมัติ โดยมีแอนิเมชันพื้นฐาน (พรีเซ็ต) ให้เลือก 12 รูปแบบ เช่น fade-in, slide, scale และ bounce
คุณสามารถปรับคุณสมบัติต่างๆ เช่น ระยะเวลา (Duration), หน่วงเวลา (Delay), ความเร่ง (Easing), จำนวนรอบการวนซ้ำ และ Fill Mode ได้อย่างเป็นธรรมชาติด้วยแถบเลื่อนและกล่องตัวเลือก พร้อมดูการเปลี่ยนแปลงในส่วนแสดงตัวอย่างได้แบบเรียลไทม์
เมื่อปรับแต่งเสร็จแล้ว เพียงคัดลอกโค้ด CSS ที่สร้างขึ้นแล้วนำไปวางในโปรเจ็กต์ของคุณได้เลย การประมวลผลทั้งหมดเกิดขึ้นภายในเบราว์เซอร์ และไม่มีการสื่อสารกับเซิร์ฟเวอร์ภายนอก คุณจึงสามารถใช้งานได้อย่างปลอดภัย
ขั้นตอนการสร้าง CSS Animation
เลือกการเคลื่อนไหวพื้นฐาน
เริ่มต้นด้วยการสลับแท็บ (เช่น Fade, Slide) แล้วเลือกพรีเซ็ตที่ใกล้เคียงกับแอนิเมชันที่คุณต้องการ
ปรับพารามิเตอร์
เปลี่ยนความเร็วในการเล่น หน่วงเวลา และความเร่งด้วยแถบเลื่อน แล้วดูการเคลื่อนไหวจริงในส่วนแสดงตัวอย่างทางด้านขวา
คัดลอกโค้ด CSS
เมื่อได้การเคลื่อนไหวที่สมบูรณ์แล้ว ให้คลิกปุ่ม "คัดลอกโค้ด" ในส่วนแสดงผลและนำไปวางในไฟล์ CSS ของคุณ
คำศัพท์เกี่ยวกับ CSS Animation
animation-duration(ระยะเวลา)- ระบุเวลาที่ใช้ในการเล่นแอนิเมชันหนึ่งรอบ (เวลาที่ใช้จนจบ) โดยระบุเป็นวินาที (s) หรือมิลลิวินาที (ms)
animation-timing-function(ความเร่ง / Easing)- ระบุเส้นโค้งความเร็ว (ความเร่ง/ความหน่วง) ของแอนิเมชัน ตัวอย่างเช่น "linear" สำหรับความเร็วคงที่ และ "ease-in-out" สำหรับการเริ่มต้นและจุดจบที่นุ่มนวล
animation-delay(หน่วงเวลา)- ระบุเวลารอ (ความหน่วง) ก่อนที่แอนิเมชันจะเริ่มทำงาน
animation-iteration-count(จำนวนรอบ)- ระบุจำนวนครั้งที่แอนิเมชันจะเล่นซ้ำ หากระบุ "infinite" จะเป็นการวนซ้ำไม่สิ้นสุด
animation-direction(ทิศทางการเล่น)- ระบุทิศทางการเล่นของแอนิเมชัน เช่น "reverse" สำหรับการเล่นย้อนกลับ และ "alternate" ซึ่งจะสลับการเล่นไปข้างหน้าและย้อนกลับในรอบคี่และคู่
animation-fill-mode(สถานะก่อน/หลัง)- ระบุว่าจะให้รักษาสไตล์ (สถานะ) ขององค์ประกอบไว้หรือไม่ก่อนและหลังการเล่นแอนิเมชัน หากตั้งค่าเป็น "forwards" สไตล์เมื่อแอนิเมชันสิ้นสุดจะถูกรักษาไว้
transition-property(คุณสมบัติเป้าหมาย)- ชื่อคุณสมบัติที่จะใช้กับ transition (เช่น transform, opacity, all)
transition-duration- ระยะเวลาที่จะให้ transition เสร็จสมบูรณ์
transition-timing-function- เส้นโค้งความเร็ว (Easing) ของ transition
คำถามที่พบบ่อย (FAQ)
- Q.ความแตกต่างระหว่าง CSS animation และ transition คืออะไร?
transitionสร้างการเคลื่อนไหวระหว่าง 2 สถานะเมื่อมีเหตุการณ์เรียกใช้งาน (เช่น hover) ส่วนanimationสามารถทำงานได้โดยอัตโนมัติโดยไม่ต้องมีทริกเกอร์ และช่วยให้คุณกำหนดสถานะตรงกลางหลายๆ จุดได้อย่างอิสระโดยใช้@keyframes- Q.เอฟเฟกต์ใดทำงานได้ลื่นไหลและเบาที่สุด?
- เอฟเฟกต์ที่ใช้
transform(translate, scale, rotate) และopacityจะทำงานได้ลื่นไหลที่สุดเนื่องจากได้รับการประมวลผลด้วยการ์ดจอ (GPU) ส่วนเอฟเฟกต์ที่เปลี่ยนwidth,heightหรือmarginจะบังคับให้เบราว์เซอร์คำนวณเค้าโครงใหม่ (reflow) จึงมักทำให้เกิดอาการกระตุก - Q.prefers-reduced-motion คืออะไร?
- มันคือคำสั่ง media query เพื่อช่วยเหลือผู้ที่มีอาการเวียนศีรษะหรือเมาการเคลื่อนไหวเมื่อดูเอฟเฟกต์ที่แรงเกินไป ขอแนะนำให้ใช้
@media (prefers-reduced-motion: reduce)เพื่อปิดหรือลดการเคลื่อนไหวสำหรับผู้ใช้กลุ่มนี้ - Q.จำเป็นต้องใช้ animation-fill-mode forwards หรือไม่?
- ตัวอย่างเช่นในเอฟเฟกต์จางขึ้น (fade-in) หากไม่ระบุ
forwardsเมื่อแสดงผลเสร็จแล้ว มันจะกลับไปสู่สถานะเริ่มต้น (เช่น opacity: 0) ดังนั้นจึงเป็นสิ่งจำเป็นหากคุณต้องการให้วัตถุคงสถานะในเฟรมสุดท้ายเอาไว้ - Q.ข้อมูลที่ฉันทำที่นี่จะถูกส่งไปยังเซิร์ฟเวอร์หรือไม่?
- ไม่ การประมวลผลทั้งหมดเสร็จสมบูรณ์ภายในเบราว์เซอร์ของคุณ และไม่มีการส่งข้อมูลใด ๆ ออกไปยังภายนอก
กรณีการใช้งาน CSS Animation
แอนิเมชันเมื่อโหลดหน้าเว็บ
ใช้งานเฟดอินเพื่อแสดงเนื้อหาอย่างนุ่มนวล หรือสไลด์อินจากด้านล่างเพื่อปรับปรุงความประทับใจแรกของหน้าเว็บ
เน้นปุ่มหรือ CTA
ใช้แอนิเมชัน เช่น pulse (เต้นของหัวใจ) หรือ bounce (กระเด้ง) บนปุ่มเพื่อให้ผู้ใช้มองเห็นได้ชัดเจนและเป็นธรรมชาติยิ่งขึ้น
แอนิเมชันเลื่อนหน้าเว็บ
ทำงานร่วมกับ Intersection Observer API และคลาสแอนิเมชันที่สร้างขึ้น เพื่อสร้างเอฟเฟกต์ที่จะเล่นทันทีที่องค์ประกอบปรากฏขึ้นมาในหน้าจอ
สถานะการโหลด/รอ
สร้างแอนิเมชันการโหลดที่หมุนแบบไม่มีที่สิ้นสุด หรือกระพริบเพื่อเป็นการตอบกลับในระหว่างการดึงข้อมูลหรือการส่งฟอร์ม
ส่งความคิดเห็น
โปรดแจ้งให้เราทราบความคิดเห็นของคุณเพื่อช่วยปรับปรุงเครื่องมือ
การส่งความคิดเห็นถูกระงับชั่วคราว
เซิร์ฟเวอร์ไม่ว่างหรือระบบป้องกันสแปมทำงานอยู่ โปรดลองอีกครั้งในภายหลัง