เครื่องมือสร้างแอนิเมชัน CSS
ปรับค่าตั้งต้นการเคลื่อนไหวหรือเฟรมสำคัญ แล้วเล่นแอนิเมชันเพื่อตรวจสอบ รับ CSS สำหรับใช้ในหน้าเว็บและตัวอย่างการใช้ HTML
สิ่งที่คุณทำได้
ปรับการเคลื่อนไหวจากพรีเซ็ต
เลือกได้จาก 12 แบบ รวมถึงการเข้า, การออก และการหมุน เปลี่ยนความยาวและจำนวนครั้งที่เล่นซ้ำให้เหมาะกับการใช้งาน
แก้ไขสถานะระหว่างการเคลื่อนไหวด้วย
ระบุการเคลื่อนที่ การหมุน สเกล และความโปร่งใสของแต่ละคีย์เฟรม แล้วตรวจสอบการเคลื่อนไหวที่สร้างได้
รับ CSS และ HTML
คัดลอกหรือบันทึก CSS ของแอนิเมชันพร้อมตัวอย่างการใช้ HTML ที่ใช้คลาสเดียวกัน
วิธีใช้งาน
เลือกพรีเซ็ต
เลือกการเคลื่อนไหวที่ต้องการและตั้งความยาวของการเล่น 1 ครั้ง การเลือกพรีเซ็ตอื่นจะแทนที่การตั้งค่าใดๆ ที่คุณปรับไว้ด้วย
ปรับเฉพาะส่วนที่จำเป็น
เปิดรายละเอียดการเล่นหรือคีย์เฟรมเพื่อเปลี่ยนการเคลื่อนไหวระหว่างการเล่น ทิศทาง จำนวนครั้งที่เล่นซ้ำ และการตั้งค่าอื่น
สร้างและเล่น
ตรวจสอบด้วย “สร้าง CSS และดูตัวอย่าง” หากเปลี่ยนการตั้งค่าใดๆ ให้สร้างใหม่อีกครั้ง
รับ CSS และ HTML
ใช้ CSS และเพิ่มคลาส toollet-motion ให้กับอิลิเมนต์ HTML ใช้ตัวอย่างการใช้ HTML คู่กับ CSS
มีประโยชน์เมื่อ
สร้างแอนิเมชันตอนเข้า
ใช้พรีเซ็ต fade-in หรือการเข้าจากด้านล่างเพื่อปรับการเคลื่อนไหวและความเร็วตอนเข้า
การเคลื่อนไหวเมื่อโต้ตอบกับปุ่ม
เปลี่ยนเงื่อนไขการเริ่มเป็น hover หรือการโฟกัสด้วยคีย์บอร์ด เพื่อสร้างการเคลื่อนไหวที่ตอบสนองต่อการโต้ตอบ
ความเข้าใจคีย์เฟรมและเงื่อนไขการเล่น
สถานะระหว่างการเคลื่อนไหวและความยาว
เปอร์เซ็นต์ของคีย์เฟรมคือตำแหน่งภายในการเล่น 1 ครั้ง สำหรับแอนิเมชันยาว 1 วินาที 50% จะอยู่ที่ 0.5 วินาที ส่วน easing กำหนดว่าค่าจะเปลี่ยนอย่างไรระหว่างคีย์เฟรม
การเคลื่อนที่ การหมุน และรูปลักษณ์
ตำแหน่งแนวนอน/แนวตั้งคือปริมาณการเคลื่อนที่จากตำแหน่งเดิม สเกล 1 คือขนาดเดิม ส่วนความโปร่งใส 0 คือโปร่งใสและ 1 คือทึบ
ความหน่วง จำนวนครั้งที่เล่นซ้ำ และทิศทาง
ความหน่วงจะถูกเพิ่มเพียงครั้งเดียวก่อนเริ่มการเล่น สำหรับการเล่นจำนวนครั้งจำกัด เวลารวมคือ ความหน่วง + ความยาวของการเล่น 1 ครั้ง × จำนวนครั้งที่เล่นซ้ำ ส่วนสลับทิศจะสลับระหว่างทิศไปข้างหน้าและย้อนกลับ
สถานะก่อนและหลังการเล่น
เลือกว่าสถานะใดจะปรากฏระหว่างความหน่วงและหลังการเล่นจบ การตั้งค่าย้อนกลับและสลับทิศจะเปลี่ยนว่าตำแหน่งคีย์เฟรมใดถูกใช้ที่จุดเริ่มและจุดสิ้นสุดของการเล่น
การตั้งค่าการลดการเคลื่อนไหว
CSS ที่สร้างจะรองรับการตั้งค่าการลดการเคลื่อนไหวของอุปกรณ์ของคุณ โดยจะหยุดแอนิเมชันและใช้สถานะปลายทางตามทิศและจำนวนครั้งที่ตั้งไว้ สำหรับการเล่นแบบไม่สิ้นสุด จะใช้ปลายทางของการเล่นครั้งแรก
คำถามที่พบบ่อย
เล่นได้ครั้งเดียวหรือไม่
ปิด “เล่นซ้ำ” และตั้งจำนวนครั้งที่เล่นซ้ำเป็น 1 พรีเซ็ตมาตรฐานจะเริ่มที่การเล่น 1 ครั้ง ส่วนการหมุนและการลอยจะเริ่มที่การเล่นซ้ำต่อเนื่อง
ควรใช้ CSS กับอิลิเมนต์ใด
เพิ่มคลาส toollet-motion ให้กับอิลิเมนต์ HTML และใช้ร่วมกับ CSS ที่สร้างได้ ตัวอย่างการใช้ HTML เป็นเพียงส่วนของอิลิเมนต์ button ไม่ใช่หน้าเว็บที่สมบูรณ์ในตัวเอง
สร้างคีย์เฟรมได้กี่จุด
คุณสามารถมี 2–8 คีย์เฟรม โดยนับที่จุดเริ่ม 0% และจุดสิ้นสุด 100% การเพิ่มคีย์เฟรมจะวางไว้ที่จุดกึ่งกลางของช่วงที่กว้างที่สุด จุดเริ่มและจุดสิ้นสุดลบไม่ได้ และมีเพียงตำแหน่งเปอร์เซ็นต์ที่ตรึงไว้
ตัวอย่างหายไปหลังจากเปลี่ยนการตั้งค่า
ผลลัพธ์จะถูกล้างเมื่อการตั้งค่าเปลี่ยน เพื่อไม่ให้คุณใช้การเคลื่อนไหวหรือโค้ดจากการตั้งค่าก่อนหน้าโดยไม่ตั้งใจ กรุณาสร้างใหม่เพื่อตรวจสอบการตั้งค่าปัจจุบัน
ทำไมตัวอย่างจึงไม่เคลื่อนไหว
การเคลื่อนไหวจะหยุดเมื่อเปิดใช้การลดการเคลื่อนไหวบนอุปกรณ์ของคุณ สำหรับการตั้งค่าแบบ hover และ focus ให้ตรวจสอบเงื่อนไขการเริ่มด้วย และตัวอย่างจะหยุดชั่วคราวเมื่อคุณสลับไปแท็บอื่น
ใช้หลายแอนิเมชันในหน้าเดียวกันได้หรือไม่
ชื่อคลาสและคีย์เฟรมที่สร้างจะใช้ร่วมกัน หากต้องการแยกแอนิเมชัน ให้เปลี่ยนทั้งสองชื่อของแต่ละแอนิเมชันและปรับการเปลี่ยนแปลงเหล่านั้นใน HTML ที่เกี่ยวข้อง
ข้อมูลนำเข้าและผลลัพธ์
- การตั้งค่า
- พรีเซ็ต 12 แบบ คีย์เฟรม 2–8 จุด และความยาว 0.2–60 วินาที
- การเล่น
- ความหน่วง 0–60 วินาที, จำนวนครั้งที่เล่นซ้ำ 1–100 ครั้งหรือไม่สิ้นสุด, easing, ทิศทาง, สถานะก่อนและหลังการเล่น และเงื่อนไขการเริ่ม
- ผลลัพธ์
- CSS และตัวอย่างการใช้ HTML โดยกำหนดไว้เฉพาะการเคลื่อนไหว ไม่ได้สร้างหน้าเว็บที่สมบูรณ์หรือไฟล์วิดีโอ