พอดแคสต์ 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 ที่มีประสิทธิภาพสูงเพื่อเจาะลึกเกี่ยวกับหัวข้อนี้
ตรวจสอบความเข้าใจของคุณ
ทดสอบความรู้เกี่ยวกับการเปลี่ยน
คุณสมบัติการเปลี่ยนข้อใดใช้ระบุการค่อยๆ เปลี่ยน
transition-duration
transition-easing
transition-cubic-bezier
transition-timing-function
animation-ease
แนวทางปฏิบัติแนะนำคือการใช้ transition-property: all
all
อาจทําให้เกิดปัญหาด้านประสิทธิภาพและการเปลี่ยนโดยไม่ตั้งใจพร็อพเพอร์ตี้ทั้งหมดสามารถเปลี่ยนได้
font-family
ไม่ได้