คุณสมบัติทิศทางภาพเคลื่อนไหว CSS คืออะไร: ทุกสิ่งที่คุณจำเป็นต้องรู้

คุณคิดว่า CSS ใช้สำหรับสร้างแอนิเมชั่นเท่านั้น? ที่จริงแล้ว คุณยังสามารถใช้ CSS เพื่อควบคุมความเร็ว ระยะเวลา ทิศทาง เวลาเริ่มต้น ฯลฯ ได้อีกด้วย

ไม่ว่าคุณจะต้องการให้แอนิเมชั่นของคุณเคลื่อนที่ในทิศทางขึ้นหรือลง คุณสมบัติ CSS ทิศทางแอนิเมชั่นในการพัฒนาเว็บจะช่วยให้คุณบรรลุเป้าหมายได้

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

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

คุณสมบัติทิศทางภาพเคลื่อนไหว CSS คืออะไร

คุณสมบัติทิศทางของภาพเคลื่อนไหว CSS เป็นข้อมูลเกี่ยวกับทิศทางของภาพเคลื่อนไหว เมื่อคุณตั้งค่าคุณสมบัตินี้แล้ว คุณสามารถตั้งค่าวงจรแอนิเมชั่นย้อนกลับ ไปข้างหน้า หรือในทิศทางอื่นได้อย่างง่ายดาย

ตอนนี้ มาดูทิศทางของแอนิเมชั่นต่างๆ กัน:

• แอนิเมชั่น-ทิศทาง: ปกติ;
• แอนิเมชั่น-ทิศทาง: ย้อนกลับ;
• แอนิเมชั่น-ทิศทาง: สลับ-ย้อนกลับ;
• แอนิเมชั่น-ทิศทาง: ทางเลือก;

เพื่อช่วยคุณเพิ่มเติม ฉันได้แชร์ไวยากรณ์คุณสมบัติทิศทางของแอนิเมชัน หวังว่าไวยากรณ์นี้จะช่วยคุณสร้างแอนิเมชั่นอย่างมืออาชีพ

/* แอนิเมชั่นเดี่ยวของคุณสมบัติแอนิเมชั่น CSS */

• แอนิเมชั่น-ทิศทาง: ปกติ;
• แอนิเมชั่น-ทิศทาง: ย้อนกลับ;
• แอนิเมชั่น-ทิศทาง: ทางเลือก;
• แอนิเมชั่น-ทิศทาง: สลับ-ย้อนกลับ;

/* ภาพเคลื่อนไหวหลายรายการของคุณสมบัติภาพเคลื่อนไหว CSS */

• ภาพเคลื่อนไหว-ทิศทาง: ปกติ ย้อนกลับ;
• แอนิเมชั่น-ทิศทาง: สลับ, ย้อนกลับ, ปกติ;

/* ค่าส่วนกลางของคุณสมบัติแอนิเมชั่น CSS */

• แอนิเมชั่น-ทิศทาง: สืบทอด;
• แอนิเมชั่น-ทิศทาง: เริ่มต้น;
• แอนิเมชั่นทิศทาง: ย้อนกลับ;
• แอนิเมชั่น-ทิศทาง: unset;

เมื่อคุณทราบคุณสมบัติแอนิเมชั่น CSS ที่แตกต่างกันแล้ว ก็ถึงเวลาทำความเข้าใจค่าของคุณสมบัติ CSS Animation

คุณสมบัติ CSS Animation ค่า

ปกติ

หากคุณใช้คุณสมบัตินี้ แอนิเมชั่นจะเล่นไปข้างหน้า หมายความว่าทุกรอบของแอนิเมชั่น แอนิเมชั่นจะรีเซ็ตเป็นสถานะเริ่มต้นและจะเริ่มใหม่อีกครั้ง

ค่า -" Normal" นั้นเป็นค่าเริ่มต้นของคุณสมบัติทิศทางการเคลื่อนไหวใน CSS ดังนั้น หากคุณไม่ตั้งค่าคุณสมบัตินี้ ตามค่าเริ่มต้น คุณสมบัตินี้จะเล่นไปข้างหน้า

ย้อนกลับ

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

ตัวอย่างเช่น ฟังก์ชันกำหนดเวลาการผ่อนผันจะกลายเป็นการผ่อนปรน

ทางเลือก

ภาพเคลื่อนไหวสำรองจะกลับทิศทางในแต่ละรอบ โดยจะวนซ้ำครั้งแรกใน ทิศทางไปข้าง หน้า การนับคือการพิจารณาว่ารอบเป็นคี่หรือเริ่มต้นที่หนึ่ง

สลับ-ย้อนกลับ

การสลับกลับทิศทางจะย้อนกลับทิศทางของแต่ละรอบ โดยการเล่นซ้ำครั้งแรกจะเล่น ย้อน กลับ การนับคือการพิจารณาว่ารอบเป็นคู่หรือคี่ เริ่มที่หนึ่ง

CSS Shorthand สำหรับแอนิเมชั่นทิศทาง

คุณจะทึ่งเมื่อรู้ว่าคุณยังสามารถตั้งค่าคุณสมบัติแอนิเมชั่นต่างๆ ได้ รวมถึงทิศทางของแอนิเมชั่น ซึ่งสามารถทำได้โดยใช้คุณสมบัติ CSS ชวเลขของแอนิเมชัน

คุณสมบัติชวเลขภาพเคลื่อนไหว CSS ใช้ภาพเคลื่อนไหวระหว่างสไตล์ เป็นวิธีการจดชวเลขเพื่อตั้งค่าคุณสมบัติแอนิเมชั่นทั้งหมด เช่น ชื่อแอนิเมชั่น สถานะ.

ปัญหาภาพเคลื่อนไหว CSS ทั่วไป

ไม่ว่าแอนิเมชั่นของคุณจะไม่ทำงานตามที่คุณต้องการหรือไม่ทำงานเลย นี่คือสาเหตุบางประการของปัญหาและวิธีแก้ไข:

ไม่มี @keyframes rule

ในแอนิเมชั่น CSS กฎ @keyframes จะกำหนดลักษณะที่ปรากฏของแอนิเมชั่น โดยเฉพาะอย่างยิ่ง จะกำหนดรูปแบบองค์ประกอบที่เปลี่ยนแปลงและเมื่อใด หากไม่มีกฎนี้ องค์ประกอบของคุณจะไม่มีแอนิเมชั่นให้ใช้ ดังนั้นในครั้งต่อไป ให้ตรวจสอบว่ากฎ @keyframes ของคุณมีอยู่หรือไม่ และชื่อกฎนั้นตรงกับชื่อแอนิเมชันสำหรับองค์ประกอบเป้าหมายหรือไม่

ไม่ได้กำหนดระยะเวลาของภาพเคลื่อนไหว

สมมติว่าคุณได้กำหนดกฎคีย์เฟรมให้กับองค์ประกอบ แต่ยังคงไม่ปรากฏหากคุณไม่ได้กำหนดระยะเวลาของภาพเคลื่อนไหว โดยค่าเริ่มต้น ความยาวศูนย์วินาทีคือวงจรภาพเคลื่อนไหว CSS

หากต้องการลบล้างวงจรนี้ คุณต้องรวมกฎระยะเวลาของภาพเคลื่อนไหวในองค์ประกอบเป้าหมายด้วยค่าวินาที เช่นเดียวกับในบล็อกเดียวกันกับชื่อภาพเคลื่อนไหว

แอนิเมชั่นเริ่มเร็วเกินไป

บางครั้ง คุณอาจต้องแสดงการเลื่อนอย่างรวดเร็วเร็วกว่าช่วงเริ่มต้นของแอนิเมชันเพื่อประสบการณ์ของผู้บริโภคที่สูงขึ้น สำเร็จด้วยอนิเมชั่น-เลื่อนสิ่งของ

คุณสมบัติ CSS ที่ไม่เคลื่อนไหว

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

ไม่รองรับ CSS นิเมชั่น

ภาพเคลื่อนไหว CSS วาดบนเบราว์เซอร์มือถือและคอมพิวเตอร์สูงสุดในปัจจุบัน อย่างไรก็ตาม แอนิเมชั่นของคุณจะไม่ทำงานหากคุณใช้เบราว์เซอร์รุ่นเก่าหรือรุ่นของเบราว์เซอร์ที่ไม่อัปเดตมาหลายปีแล้ว โดยไม่ต้องสงสัยเพราะสูญเสียความช่วยเหลือจากเบราว์เซอร์

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

CSS Shorthand เขียนผิด

ชวเลข CSS เป็นวิธีการที่ยอดเยี่ยมในการเขียน CSS ทำความสะอาดและลดปริมาณโค้ดในไฟล์ของคุณ อนิเมชั่นเป็นชวเลขสำหรับบ้าน CSS เหล่านั้น:

• แอนิเมชั่น-ช่วงเวลา
• แอนิเมชั่น-โทร
• แอนิเมชั่น-เลื่อน
• แอนิเมชั่น-ทิศทาง
• แอนิเมชั่น-เติมโหมด
• แอนิเมชั่น-การวนซ้ำ-พึ่งพา
• แอนิเมชั่น-play-nation
• แอนิเมชั่น-จับเวลา-ฟังก์ชั่น

ต้องมีค่าสองค่า — ค่าหนึ่งสำหรับช่วงเวลาของแอนิเมชั่นและอีกค่าหนึ่งสำหรับการเรียกแอนิเมชั่น — เป็นสิ่งจำเป็น นอกจากนั้น ลำดับของค่าจะเป็นตัวกำหนดราคาที่ถูกกำหนดให้กับแอนิเมชั่นที่เป็นของ

ค่าที่ไม่ตรงแนวควรทำให้แอนิเมชั่นมีพฤติกรรมที่แตกต่างจากที่คุณคาดไว้ ดังนั้น หากการใช้ชวเลขของแอนิเมชันเป็นของ ให้ตรวจสอบให้แน่ใจว่าค่าของมันได้รับการจัดทำดัชนีภายในลำดับที่เหมาะสม

ประสิทธิภาพช้า

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

แอนิเมชั่น CSS ที่ง่ายที่สุดนั้นไม่มีผลสำคัญใดๆ ต่อเวลาในการโหลดหน้าเว็บ อย่างไรก็ตาม ยิ่งคุณอัปโหลดผลลัพธ์ในแอนิเมชั่นของคุณมากเท่าไหร่ โอกาสที่คุณจะประสบปัญหาด้านประสิทธิภาพโดยรวมก็จะยิ่งมากขึ้นเท่านั้น

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

น่าเสียดายที่ CSS ที่เคลื่อนไหวได้มากที่สุดทำให้เกิดการทาสีใหม่ในขณะที่มีการเปลี่ยนแปลง ข้อยกเว้นของการแปลงนี้ (สำหรับสิ่งต่างๆ เช่น มาตราส่วน การหมุน และตำแหน่ง) และความทึบ ซึ่งอาจดูมีชีวิตชีวาโดยมีผลกระทบน้อยที่สุดต่อประสิทธิภาพโดยรวม นี่คือข้อมูลอ้างอิงที่ CSS ทำให้เกิดการทาสีใหม่ในขณะที่มีชีวิตชีวา

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

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

คำพูดสุดท้าย

ได้ HubSpot ให้คุณควบคุมทิศทางของแอนิเมชั่นได้โดยใช้โค้ด CSS ที่ถูกต้อง ดี! ฉันเห็นด้วยอย่างยิ่งว่าคุณสมบัติทิศทางการเคลื่อนไหว CSS เป็นสิ่งหนึ่งที่หลายคนไม่ทราบ

แต่ใช่ หลังจากอ่านบล็อกนี้แล้ว คุณจะคุ้นเคยกับวิธีควบคุมแอนิเมชั่นและให้รูปลักษณ์ที่น่าดึงดูดและใช้งานง่ายแก่การออกแบบเว็บไซต์ของคุณ ดังนั้นสิ่งที่คุณรอ? เตรียมตัวให้พร้อมเพื่อสร้างการออกแบบที่ดึงดูดกลุ่มเป้าหมายของคุณ

ยังคงต้องการความช่วยเหลือในการออกแบบเว็บไซต์ โปรดติดต่อเรา ผู้เชี่ยวชาญของเราจะช่วยคุณได้เช่นเดียวกัน

บรรณาธิการ: Divya