เครื่องมือสร้างแอนิเมชันสปินเนอร์ CSS

แอนิเมชันถูกสร้างขึ้นอย่างไร

CSS ที่สร้างขึ้นมีสองส่วนที่ทำงานเป็นคู่กัน พร็อพเพอร์ตี้ animation บน .loader ตั้งชื่อแอนิเมชัน กำหนดระยะเวลาและฟังก์ชันจังหวะ และสั่งให้ทำซ้ำ:

animation: spin 0.8s linear infinite;

กฎ @keyframes spin อธิบายการเคลื่อนไหวเอง โดยมีสถานะสิ้นสุดเพียงหนึ่งเดียวคือการหมุน 360 องศา เบราว์เซอร์เริ่มจากตำแหน่งปกติขององค์ประกอบ แล้วค่อย ๆ เปลี่ยนไปยังสถานะสิ้นสุดนั้น:

@keyframes spin {
  to { transform: rotate(360deg); }
}

ช่องความเร็วในเครื่องมือจะกลายเป็นระยะเวลา ส่วนอื่นรวมถึง linear และ infinite ยังคงเดิม

เลือกระยะเวลา

วงกลมขนาดใหญ่อาจหมุนช้ากว่าวงกลมเล็กเล็กน้อย เพราะขอบของวงกลมใหญ่เคลื่อนที่ได้ระยะทางมากกว่าในแต่ละวินาทีอยู่แล้ว

ทำไมใช้จังหวะแบบ linear

เครื่องมือใช้ linear เพื่อให้วงกลมรักษาความเร็วเชิงมุมเท่ากันตลอดหนึ่งรอบ เส้นโค้งการผ่อนอย่าง ease-in-out จะทำให้วงกลมช้าลงและเร็วขึ้นในทุกรอบ ซึ่งดูกระตุกสำหรับลูปที่ไม่สิ้นสุด หากต้องการเอฟเฟกต์นั้นจริง ๆ ให้เปลี่ยนคำว่า linear ในโค้ด CSS ที่วางไว้

ข้อจำกัดที่ควรทราบ

• ความเร็ว 0 ทำให้แอนิเมชันมีความยาวเป็นศูนย์ วงกลมจะไม่หมุนให้เห็น ควรใช้ค่าที่มากกว่า 0
• สปินเนอร์จะหมุนตามเข็มนาฬิกาเสมอ หากต้องการกลับทิศ ให้เปลี่ยนการหมุนสุดท้ายเป็น -360deg หลังจากคัดลอกแล้ว
• การเคลื่อนไหวเป็นการหมุนต่อเนื่องหนึ่งครั้ง หากต้องการการกระพริบ การเด้ง หรือการเคลื่อนไหวหลายขั้นตอน ต้องเขียน keyframes เพิ่มด้วยตนเอง

หยุดชั่วคราวและควบคุมแอนิเมชัน

เมื่อ CSS อยู่ในหน้าของคุณแล้ว คุณสามารถควบคุมแอนิเมชันด้วยพร็อพเพอร์ตี้มาตรฐานได้ การตั้งค่า animation-play-state: paused; จะทำให้วงกลมหยุดอยู่กับที่ ซึ่งมีประโยชน์เมื่องานเสร็จแล้วแต่องค์ประกอบยังต้องแสดงอยู่ การตั้งค่า animation-delay: 0.2s; จะเลื่อนการเริ่ม ทำให้สปินเนอร์ปรากฏเฉพาะเมื่อการรอไม่ได้เสร็จทันที พร็อพเพอร์ตี้เหล่านี้เป็น CSS ปกติ ที่คุณเพิ่มลงในกฎ .loader หลังจากคัดลอกแล้ว