แอนิเมชันคีย์เฟรม CSS ด้วย React

กฎ @keyframes อธิบายแอนิเมชันหลายขั้นด้วยการระบุค่าคุณสมบัติตามจุดต่าง ๆ บนเส้นเวลา โดยใช้ from/to หรือเปอร์เซ็นต์ เช่น 0%, 50%, 100%

คีย์เฟรมแตกต่างจากการเปลี่ยนผ่านตรงที่สามารถอธิบายการเคลื่อนไหวหลายขั้นที่ซับซ้อนได้ และทำงานได้ด้วยตัวเองโดยไม่ต้องเปลี่ยนสถานะในทุกขั้น

คุณใช้ชุดคีย์เฟรมด้วยคุณสมบัติ animation: animation: slideIn 400ms ease forwards ซึ่งรวมชื่อ ระยะเวลา ฟังก์ชันกำหนดจังหวะ และโหมดการคงค่าไว้ด้วยกัน

โหมดการคงค่า forwards จะตรึงองค์ประกอบไว้ที่ค่าของคีย์เฟรมสุดท้ายหลังแอนิเมชันสิ้นสุด เพื่อป้องกันไม่ให้กระโดดกลับไปยังจุดเริ่มต้น

ใน React โดยทั่วไปคุณจะเพิ่มคลาสที่มีการประกาศ animation เมื่อสถานะกลายเป็นจริง ตัวอย่างเช่น การเพิ่ม is-entering จะเริ่มคีย์เฟรมทันทีที่องค์ประกอบถูกเมานต์หรือเมื่อแฟล็กเปลี่ยนค่า

วิธีนี้ทำให้ตรรกะของแอนิเมชันอยู่ใน CSS ขณะที่ React เพียงตัดสินใจว่าจะเพิ่มคลาสเมื่อใด

animation-fill-mode ควบคุมว่าสไตล์ใดจะมีผลก่อนและหลังแอนิเมชันทำงาน forwards จะคงค่าคีย์เฟรมสุดท้ายไว้ backwards จะใช้ค่าคีย์เฟรมแรกระหว่างช่วงหน่วง และ both จะทำทั้งสองอย่าง

หากไม่มี forwards องค์ประกอบที่กำลังเคลื่อนไปสู่สถานะค่อย ๆ ปรากฏจะกระโดดกลับไปมองไม่เห็นเมื่อแอนิเมชันเสร็จสิ้น

animation-direction: alternate จะเล่นแอนิเมชันไปข้างหน้าแล้วเล่นย้อนกลับในแต่ละรอบ เมื่อนำไปรวมกับ animation-iteration-count: infinite จะสร้างการเคลื่อนไหวไปกลับอย่างลื่นไหล คล้ายเอฟเฟกต์เต้นเป็นจังหวะหรือหายใจ

วิธีนี้เหมาะสำหรับตัวบ่งชี้การโหลดหรือการเคลื่อนไหวเล็กน้อยที่ช่วยดึงความสนใจ

animation-play-state สามารถเป็น running หรือ paused ได้ คุณสามารถควบคุมค่านี้จากสถานะของ React ได้ เช่น หยุดแอนิเมชันข้อความเลื่อนเมื่อวางเมาส์เหนือ โดยสลับคลาส

เนื่องจากแอนิเมชันหยุดชั่วคราวแทนที่จะรีเซ็ต แอนิเมชันจึงทำงานต่อจากจุดที่หยุดไว้ได้อย่างแม่นยำ

แอนิเมชันคีย์เฟรมจะเล่นเพียงครั้งเดียวเมื่อใช้คลาสกับองค์ประกอบเป็นครั้งแรก การเพิ่มคลาสเดิมอีกครั้งจะไม่เริ่มแอนิเมชันใหม่ วิธีที่สะอาดที่สุดใน React คือเปลี่ยน key ขององค์ประกอบ เพื่อให้ React ติดตั้งโหนดใหม่และเล่นแอนิเมชันตั้งแต่ต้นอีกครั้ง

ตัวอย่างเช่น การใช้ key={count} กับการแจ้งเตือนแบบโทสต์จะติดตั้งใหม่ทุกครั้งที่ค่าตัวนับเพิ่มขึ้น

ผู้ใช้บางรายเปิดใช้การลดการเคลื่อนไหวใน OS เพื่อความสบายหรือการเข้าถึง ให้ครอบแอนิเมชันที่ไม่จำเป็นไว้ใน @media (prefers-reduced-motion: reduce) แล้วปิดใช้งานหรือลดระยะเวลาแอนิเมชันเหล่านั้นเมื่อใช้การตั้งค่านี้

การเคารพการตั้งค่านี้ทำให้อินเทอร์เฟซของคุณครอบคลุมผู้ใช้มากขึ้น และช่วยหลีกเลี่ยงการทำให้เกิดความไม่สบาย

หากต้องการทำให้แอนิเมชันทำงานเมื่อองค์ประกอบเข้าสู่พื้นที่แสดงผล ให้ใช้ IntersectionObserver ใน useEffect เมื่อรายการที่สังเกตเห็นปรากฏ คุณจะตั้งค่าสถานะ ซึ่งจะเพิ่มคลาสแอนิเมชัน

วิธีนี้ทำให้เกิดเอฟเฟกต์แสดงองค์ประกอบเมื่อเลื่อนหน้า โดยไม่ต้องมีตัวรับฟังการเลื่อนจำนวนมากทำงานในทุกเฟรม

animation-delay ทำให้เวลาเริ่มต้นของแอนิเมชันคีย์เฟรมแต่ละรายการเหลื่อมกัน การกำหนดระยะหน่วงที่เพิ่มขึ้นให้รายการต่าง ๆ จะทำให้รายการเหล่านั้นแสดงแอนิเมชันตามลำดับอย่างมีจังหวะ

คุณสามารถคำนวณระยะหน่วงของแต่ละรายการใน React ได้ด้วย style={{ animationDelay: i * 80 + 'ms' }}

ใช้การเปลี่ยนผ่านสำหรับการเปลี่ยนแปลงแบบสองสถานะง่าย ๆ ที่เกิดจากการโต้ตอบ และใช้คีย์เฟรมเมื่อต้องการการเคลื่อนไหวหลายขั้น การวนซ้ำ หรือแอนิเมชันที่ทำงานแยกจากการสลับสถานะ

ทั้งสองอย่างเป็น CSS ล้วน ๆ ดังนั้น React จึงตัดสินใจเพียงว่าจะผูกคลาสเมื่อใด ส่วนเบราว์เซอร์จัดการเฟรมเอง

ทดสอบความเข้าใจเกี่ยวกับการทำงานของคีย์เฟรม

คุณได้เรียนรู้การกำหนด @keyframes การใช้ด้วยรูปแบบย่อ animation การควบคุมโหมดการเติมและทิศทาง การหยุดชั่วคราวและเรียกแอนิเมชันให้ทำงานซ้ำ รวมถึงการแสดงองค์ประกอบเมื่อเลื่อนหน้าด้วย IntersectionObserver

คุณยังได้เห็นวิธีเคารพ prefers-reduced-motion เพื่อให้การเคลื่อนไหวเข้าถึงได้มากขึ้น