การเปลี่ยนผ่านคุณสมบัติหลายรายการ
ใช้การเปลี่ยนผ่านกับคุณสมบัติ CSS หลายรายการพร้อมกันด้วยค่าที่คั่นด้วยจุลภาค
การเปลี่ยนผ่านคุณสมบัติหลายรายการ เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุใดจึงต้องทำทรานซิชันกับคุณสมบัติหลายรายการ
การโต้ตอบในส่วนติดต่อผู้ใช้จริงมักมีคุณสมบัติหลายรายการเปลี่ยนพร้อมกัน เช่น สีพื้นหลัง เงา และขนาดเมื่อวางเมาส์ CSS รองรับการกำหนดการผ่อนจังหวะและระยะเวลาแยกกันสำหรับแต่ละคุณสมบัติ
ทรานซิชันที่คั่นด้วยจุลภาค
ระบุทรานซิชันหลายรายการโดยคั่นด้วยเครื่องหมายจุลภาค แต่ละรายการจะใช้กับคุณสมบัติหนึ่งรายการอย่างอิสระ:
<div class="card">Card</div>ระยะเวลาที่แตกต่างกันสำหรับแต่ละคุณสมบัติ
กำหนดความเร็วที่แตกต่างกันให้แต่ละคุณสมบัติ เพื่อให้เกิดความรู้สึกเป็นชั้นและเป็นธรรมชาติ:
<button class="btn">Hover-ready button</button>การผ่อนจังหวะที่แตกต่างกันสำหรับแต่ละคุณสมบัติ
ผสมฟังก์ชันการผ่อนจังหวะต่าง ๆ เพื่อให้แต่ละคุณสมบัติมีความรู้สึกเหมาะสม:
<div class="modal">Modal content</div>ข้อเสียของ transition: all
การใช้ transition: all หมายความว่าคุณสมบัติทุกอย่างที่เปลี่ยนแปลงจะใช้จังหวะเวลาเดียวกัน ซึ่งอาจทำให้เกิดแอนิเมชันที่ไม่ต้องการกับคุณสมบัติที่ควรเปลี่ยนแบบฉับพลัน เช่น การเปลี่ยนแปลงของ display หรือตำแหน่ง
ทรานซิชันที่ขัดจังหวะได้
ทรานซิชัน CSS สามารถถูกขัดจังหวะได้ หากสถานะโฮเวอร์สิ้นสุดลงระหว่างทรานซิชัน ทรานซิชันจะย้อนกลับจากค่าที่กำลังแสดงอยู่ ไม่ใช่จากสถานะสุดท้าย จึงทำให้การย้อนกลับราบรื่นโดยไม่เกิดการกระโดดฉับพลัน
การประสานการเข้าและการออก
ใช้ระยะเวลาที่แตกต่างกันสำหรับการวางเมาส์เข้าและออก โดยเขียนทับทรานซิชันในสถานะ :hover:
<div class="card demo-active">Card</div>การหน่วงเวลาแบบไล่ลำดับ
เพิ่มเวลาหน่วงให้มากขึ้นกับองค์ประกอบพี่น้องแต่ละรายการ เพื่อสร้างเอฟเฟกต์การปรากฏแบบไล่ลำดับ:
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>คุณสมบัติกำหนดเองของ CSS สำหรับการไล่ลำดับ
กำหนดเวลาหน่วงแบบไล่ลำดับจากคุณสมบัติกำหนดเองของ CSS ที่ตั้งค่าผ่าน JavaScript หรือ HTML:
<div class="item">Item</div>ทรานซิชันเทียบกับแอนิเมชัน
ใช้ทรานซิชันสำหรับการเปลี่ยนแปลงแบบสองสถานะ เช่น ไม่ทำงาน → วางเมาส์ ใช้แอนิเมชัน @keyframes สำหรับลำดับแบบหลายขั้น เอฟเฟกต์แบบวนซ้ำ หรือแอนิเมชันที่เริ่มทำงานด้วยตัวเอง
การเพิ่มประสิทธิภาพด้วย will-change
แจ้งเบราว์เซอร์ล่วงหน้าว่าคุณสมบัติใดจะแสดงแอนิเมชัน เพื่อให้เบราว์เซอร์ปรับประสิทธิภาพไว้ก่อนได้ ควรใช้อย่างจำกัด เพราะจะใช้หน่วยความจำ GPU
<div class="card">Card</div>ตรวจสอบความเข้าใจอย่างรวดเร็ว
การ์ดมี transition: background 150ms, transform 250ms อยู่ในสถานะพื้นฐาน เมื่อวางเมาส์ หากผู้ใช้เลื่อนเคอร์เซอร์ออกอย่างรวดเร็วระหว่างแอนิเมชัน จะเกิดอะไรขึ้น
ทบทวน
การเปลี่ยนผ่านที่คั่นด้วยจุลภาคทำให้แต่ละคุณสมบัติกำหนดระยะเวลา การปรับจังหวะ และความหน่วงของตนเองได้ หลีกเลี่ยง transition: all เพราะอาจทำให้คุณสมบัติที่ไม่ได้ตั้งใจเคลื่อนไหวได้ การเปลี่ยนผ่านสามารถถูกแทรกได้ และย้อนกลับอย่างราบรื่นจากตำแหน่งปัจจุบัน ใช้ความหน่วงเพื่อสร้างเอฟเฟกต์แบบทยอยกัน
คำถามที่พบบ่อย
บทเรียน “การเปลี่ยนผ่านคุณสมบัติหลายรายการ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การเปลี่ยนผ่านคุณสมบัติหลายรายการ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การเปลี่ยนผ่านคุณสมบัติหลายรายการ”
ใช้การเปลี่ยนผ่านกับคุณสมบัติ CSS หลายรายการพร้อมกันด้วยค่าที่คั่นด้วยจุลภาค คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การเปลี่ยนผ่านคุณสมบัติหลายรายการ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ระยะเวลาและจังหวะของคุณสมบัติการเปลี่ยนผ่าน
- ฟังก์ชันผ่อนความเร็ว: ease linear cubic-bezier
- การเปลี่ยนผ่านคุณสมบัติหลายรายการ
- ประสิทธิภาพ: คุณสมบัติที่แปลงได้เทียบกับคุณสมบัติที่ต้องวาดใหม่