การเปลี่ยนฉาก

พอดแคสต์ CSS - 044: การเปลี่ยนฉาก

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

โดยค่าเริ่มต้น CSS จะเปลี่ยนรูปแบบของสถานะเหล่านี้ทันที

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

คุณสมบัติการเปลี่ยน

หากต้องการใช้การเปลี่ยนใน CSS ให้ใช้คุณสมบัติการเปลี่ยนต่างๆ หรือคุณสมบัติ transition ชวเลข

พร็อพเพอร์ตี้การเปลี่ยน

คุณสมบัติ transition-property ระบุรูปแบบที่จะเปลี่ยน

.my-element {
  transition-property: background-color;
}

transition-property ยอมรับชื่อพร็อพเพอร์ตี้ CSS อย่างน้อย 1 ชื่อในรายการที่คั่นด้วยคอมมา

หรือคุณจะใช้ transition-property: all เพื่อระบุว่าทุกพร็อพเพอร์ตี้ควรเปลี่ยนก็ได้

ระยะเวลาการเปลี่ยน

พร็อพเพอร์ตี้ transition-duration ใช้เพื่อกำหนดระยะเวลาที่ใช้ในการเปลี่ยนให้เสร็จสิ้น

transition-duration ยอมรับหน่วยเวลา ไม่ว่าจะเป็นหน่วยวินาที (s) หรือมิลลิวินาที (ms) และมีค่าเริ่มต้นเป็น 0s

ฟังก์ชันการเปลี่ยนเวลา

ใช้พร็อพเพอร์ตี้ transition-timing-function เพื่อเปลี่ยนความเร็วของการเปลี่ยน CSS ตลอดช่วง transition-duration

โดยค่าเริ่มต้น CSS จะเปลี่ยนองค์ประกอบด้วยความเร็วคงที่ (transition-timing-function: linear) การเปลี่ยนแบบเชิงเส้นอาจดูเหมือนปลอมขึ้น แต่ในความเป็นจริง วัตถุมีน้ำหนักและไม่สามารถหยุดและเริ่มต้นได้ทันที การค่อยๆ เข้าสู่หรือออกจากจุดเปลี่ยนจะทำให้การเปลี่ยนของคุณมีชีวิตชีวาและเป็นธรรมชาติมากขึ้น

โมดูลเกี่ยวกับภาพเคลื่อนไหว CSS มีภาพรวมที่ดีเกี่ยวกับฟังก์ชันการจับเวลา

คุณใช้DevToolsเพื่อทดสอบฟังก์ชันการจับเวลาต่างๆ แบบเรียลไทม์ได้

ความล่าช้าในการเปลี่ยน

ใช้คุณสมบัติ transition-delay เพื่อระบุเวลาที่การเปลี่ยนจะเริ่มต้น หากไม่ได้ระบุ transition-duration การเปลี่ยนจะเริ่มต้นทันทีเนื่องจากค่าเริ่มต้นคือ 0s พร็อพเพอร์ตี้นี้ยอมรับหน่วยเวลา เช่น วินาที (s) หรือมิลลิวินาที (ms)

พร็อพเพอร์ตี้นี้มีประโยชน์สำหรับการเปลี่ยนแบบสับเปลี่ยนกัน โดยการตั้งค่า transition-delay ที่นานขึ้นสำหรับองค์ประกอบถัดไปแต่ละรายการในกลุ่ม

transition-delay ยังมีประโยชน์สําหรับการแก้ไขข้อบกพร่อง การตั้งค่าการหน่วงเวลาเป็นค่าลบอาจเริ่มการเปลี่ยนไปยังไทม์ไลน์

Shorthand: การเปลี่ยน

มีเวอร์ชันแบบสั้นเช่นเดียวกับคุณสมบัติ CSS ส่วนใหญ่ transition รวม transition-property, transition-duration, transition-timing-function และ transition-delay

.longhand {
  transition-property: transform;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
}

.shorthand {
  transition: transform 300ms ease-in-out 0s;
}

อะไรที่เปลี่ยนได้และไม่ได้

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

โดยทั่วไป คุณจะทำได้เพียงเปลี่ยนองค์ประกอบที่สามารถมี "สถานะตรงกลาง" ระหว่างสถานะเริ่มต้นกับสถานะสุดท้ายได้เท่านั้น ตัวอย่างเช่น คุณจะเพิ่มการเปลี่ยนสำหรับ font-family ไม่ได้ เนื่องจากไม่ชัดเจนว่า "ตำแหน่งตรงกลาง" ระหว่าง serif กับ monospace ควรมีลักษณะอย่างไร ในทางกลับกัน คุณสามารถเพิ่มทรานซิชันสําหรับ font-size ได้ เนื่องจากหน่วยเป็นความยาวที่หาค่าในช่วงระหว่างนี้ได้

ต่อไปนี้เป็นคุณสมบัติทั่วไปบางส่วนที่คุณเปลี่ยนได้

เปลี่ยนรูปแบบ

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

โปรดดูส่วนการเปลี่ยนรูปแบบในโมดูลฟังก์ชัน

สี

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

พร็อพเพอร์ตี้ color, background-color และ border-color เป็นเพียงตำแหน่งไม่กี่ตำแหน่งที่สีเปลี่ยนได้เมื่อมีการโต้ตอบ

ดูโมดูลของเราเกี่ยวกับสี

ให้แสงเงา

เงามักถูกเปลี่ยนเพื่อบ่งชี้การเปลี่ยนแปลงระดับความสูง เช่น จากจุดโฟกัสของผู้ใช้

ดูโมดูลของเราเกี่ยวกับเงา

ฟิลเตอร์

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

โปรดดูโมดูลของเราเกี่ยวกับตัวกรอง

ทริกเกอร์การเปลี่ยน

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

ด้านล่างนี้คือรายการคลาส Pseudo และเหตุการณ์บางส่วนที่สามารถทริกเกอร์การเปลี่ยนแปลงสถานะในองค์ประกอบ

• :hover: จับคู่ในกรณีที่เคอร์เซอร์อยู่บนองค์ประกอบ
• :focus: ตรงกันในกรณีที่โฟกัสองค์ประกอบอยู่
• :focus-within : จะจับคู่ในกรณีที่โฟกัสองค์ประกอบหรือองค์ประกอบย่อยใดๆ
• :target: จับคู่เมื่อส่วนย่อยของ URL ปัจจุบันตรงกับรหัสขององค์ประกอบ
• :active: จะจับคู่เมื่อมีการเปิดใช้งานองค์ประกอบ (โดยปกติจะเป็นเมื่อมีการกดเมาส์เหนือองค์ประกอบ)
• class เปลี่ยนจาก JavaScript: เมื่อ CSS ขององค์ประกอบ class เปลี่ยนแปลงผ่าน JavaScript แล้ว CSS จะเปลี่ยนพร็อพเพอร์ตี้ที่มีสิทธิ์ซึ่งมีการเปลี่ยนแปลงไปแล้ว

การเปลี่ยนสำหรับการเข้าหรือออก

การตั้งค่าพร็อพเพอร์ตี้ transition ที่ต่างกันเมื่อวางเมาส์เหนือ/โฟกัส ทำให้คุณสามารถสร้างเอฟเฟ็กต์ที่น่าสนใจบางอย่างได้

.my-element {
  background: red;

  /* This transition is applied on the "exit" transition */
  transition: background 2000ms ease-in;
}

.my-element:hover {
  background: blue;

  /* This transition is applied on the "enter" transition */
  transition: background 150ms ease;
}

ข้อควรพิจารณาเกี่ยวกับการช่วยเหลือพิเศษ

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

/*
  If the user has expressed their preference for
  reduced motion, then don't use transitions.
*/
@media (prefers-reduced-motion: reduce) {
  .my-element {
    transition: none;
  }
}

/*
  If the browser understands the media query and the user
  explicitly hasn't set a preference, then use transitions.
*/
@media (prefers-reduced-motion: no-preference) {
  .my-element {
    transition: transform 250ms ease;
  }
}

ดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์สื่อนี้ได้ในบล็อกโพสต์ของเราต้องการลดการเคลื่อนไหว: บางครั้งการเคลื่อนไหวน้อยก็อาจมากกว่า

ข้อพิจารณาด้านประสิทธิภาพ

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

อ่านคำแนะนำเกี่ยวกับภาพเคลื่อนไหว CSS ที่มีประสิทธิภาพสูงเพื่อเจาะลึกเกี่ยวกับหัวข้อนี้

ตรวจสอบความเข้าใจของคุณ

ทดสอบความรู้เกี่ยวกับการเปลี่ยน