การเปลี่ยนผ่าน: คุณสมบัติ ระยะเวลา และจังหวะ
เพิ่ม transition เพื่อทำให้การเปลี่ยนแปลงคุณสมบัติ CSS เคลื่อนไหวอย่างนุ่มนวล เลือกระยะเวลาที่เหมาะสม และเลือกฟังก์ชันการเร่ง เช่น ease-in-out
การเปลี่ยนผ่าน: คุณสมบัติ ระยะเวลา และจังหวะ เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
ทรานซิชันของ CSS คืออะไร
ทรานซิชันของ CSS ทำให้คุณสมบัติเปลี่ยนจากค่าหนึ่งไปเป็นอีกค่าเมื่อมีการเปลี่ยนแปลง (เมื่อวางเมาส์ โฟกัส หรือสลับคลาส) นี่เป็นการทำงานเชิงประกาศ คุณเพียงระบุให้ CSS ทราบว่าคุณสมบัติใดต้องเปลี่ยนผ่านและเปลี่ยนอย่างไร ส่วนที่เหลือเบราว์เซอร์จะจัดการให้
ไวยากรณ์พื้นฐาน
transition: property duration timing-function delay คุณสามารถระบุทรานซิชันหลายรายการโดยคั่นด้วยจุลภาค
.btn {
background: #6366f1;
transition: background-color 0.2s ease;
}
.btn:hover {
background: #4f46e5;
}
// Browser smoothly animates the colour changeค่าคุณสมบัติ
ระบุว่าคุณสมบัติใดต้องการให้เปลี่ยนผ่าน ใช้ all เพื่อเปลี่ยนผ่านทุกคุณสมบัติที่ทำให้เคลื่อนไหวได้ แต่การทำเช่นนี้อาจทำให้เกิดทรานซิชันที่ไม่ต้องการกับคุณสมบัติอื่น ควรระบุให้ชัดเจนเพื่อประสิทธิภาพและการทำงานที่คาดเดาได้
.card {
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
opacity 0.15s linear;
}
/* Avoid 'all' in most cases */
.risky { transition: all 0.3s; }ระยะเวลา — นานเท่าใด
ระบุระยะเวลาทรานซิชันเป็น s (วินาที) หรือ ms (มิลลิวินาที) ใช้ระยะเวลาสั้น (100–200ms) สำหรับการโต้ตอบขนาดเล็ก ระยะเวลาปานกลาง (200–400ms) สำหรับการเปลี่ยนสถานะขององค์ประกอบ และระยะเวลานาน (400ms ขึ้นไป) สำหรับแอนิเมชันระดับหน้า
ฟังก์ชันกำหนดเวลา — ความรู้สึก
ฟังก์ชันกำหนดเวลาควบคุมเส้นโค้งการเร่งความเร็ว ค่าที่พบบ่อย ได้แก่ ease (ค่าเริ่มต้น: เริ่มช้า ช่วงกลางเร็ว และจบช้า), linear (ความเร็วคงที่), ease-in (เริ่มช้า), ease-out (จบช้า) และ ease-in-out เส้นโค้งแบบกำหนดเองคือ cubic-bezier(x1, y1, x2, y2)
.btn { transition: transform 0.2s ease-out; }
.toast { transition: opacity 0.3s ease-in-out; }
/* Custom cubic-bezier from cubic-bezier.com: */
.spring { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }การหน่วง — เริ่มเมื่อใด
การหน่วงของการเปลี่ยนผ่านจะเริ่มแอนิเมชันหลังเวลาที่ระบุ ใช้เพื่อจัดจังหวะองค์ประกอบหลายรายการให้เหลื่อมกัน หรือป้องกันการทำงานของโฮเวอร์โดยไม่ตั้งใจเมื่อเมาส์เคลื่อนที่อย่างรวดเร็ว
.dropdown-menu {
opacity: 0;
transition: opacity 0.2s ease 0.1s; /* 100ms delay */
}
.dropdown:hover .dropdown-menu {
opacity: 1;
}เหตุการณ์ transitionend
JavaScript สามารถตรวจจับได้ว่าการเปลี่ยนผ่านเสร็จสิ้นเมื่อใดด้วยเหตุการณ์ transitionend ซึ่งมีประโยชน์สำหรับการนำองค์ประกอบออกหลังการค่อย ๆ จางหาย หรือการเรียกใช้ขั้นตอนถัดไปในลำดับ
element.addEventListener('transitionend', (e) => {
if (e.propertyName === 'opacity' && element.style.opacity === '0') {
element.remove();
}
});การแปลงองค์ประกอบ
คุณสมบัติ transform ใช้การเร่งด้วย GPU และเหมาะอย่างยิ่งสำหรับการเปลี่ยนผ่าน การแปลงที่ใช้บ่อย ได้แก่ translate(), scale(), rotate() และ skew() การทำแอนิเมชันให้กับการแปลงและความทึบจะเรียกใช้เฉพาะการประกอบภาพเท่านั้น ซึ่งเป็นเส้นทางที่เร็วที่สุด
.card {
transform: translateY(0) scale(1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}สิ่งใดบ้างที่สามารถทำการเปลี่ยนผ่านได้
คุณสมบัติใดก็ตามที่มีค่าเป็นตัวเลขสามารถทำการเปลี่ยนผ่านได้ เช่น ความทึบ สี การแปลง ความกว้าง ความสูง ระยะห่างภายใน เส้นขอบ และขนาดแบบอักษร คุณสมบัติอย่างการแสดงผลและการมองเห็นจะไม่เปลี่ยนผ่านอย่างราบรื่น ดังนั้นให้ใช้ความทึบแทนสำหรับการค่อย ๆ ปรากฏหรือจางหาย
ภาคปฏิบัติ: โมดัลค่อย ๆ ปรากฏ
โมดัลจะค่อย ๆ ปรากฏพร้อมขยายจากขนาดที่เล็กลงเล็กน้อย ใช้คลาส .open ด้วย JavaScript ส่วน CSS จะจัดการแอนิเมชัน
.modal {
opacity: 0;
transform: scale(0.95);
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
}
.modal.open {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}ประสิทธิภาพ: ใช้การแปลงและความทึบเป็นหลัก
การทำแอนิเมชันให้กับคุณสมบัติที่ทำให้เกิดการจัดวางใหม่ เช่น ความกว้าง ความสูง ระยะขอบ ตำแหน่งด้านบน และตำแหน่งด้านซ้าย มีค่าใช้จ่ายสูง เพราะเบราว์เซอร์จะคำนวณการจัดวางใหม่ในทุกเฟรม ควรใช้ transform และ opacity เป็นหลักเพื่อให้แอนิเมชันทำงานได้อย่างราบรื่นที่ 60 เฟรมต่อวินาที
ตรวจสอบอย่างรวดเร็ว
ควรเลือกทำแอนิเมชันให้กับคุณสมบัติ CSS ใดเพื่อให้ได้ประสิทธิภาพดีที่สุด
ทบทวน: การเปลี่ยนผ่านของ CSS
การเปลี่ยนผ่าน: คุณสมบัติ ระยะเวลา ฟังก์ชันกำหนดจังหวะ และการหน่วง ควรทำแอนิเมชันเฉพาะคุณสมบัติที่ต้องการ ไม่ใช่ใช้ 'ทั้งหมด' ใช้ ease, ease-out และ ease-in-out เพื่อให้การเคลื่อนไหวเป็นธรรมชาติ ตรวจจับ transitionend เพื่อเชื่อมการทำงานต่าง ๆ เข้าด้วยกัน ใช้การแปลงและความทึบเป็นหลักเพื่อประสิทธิภาพ และใช้การสลับคลาสใน JS เพื่อเรียกใช้การเปลี่ยนผ่าน
คำถามที่พบบ่อย
บทเรียน “การเปลี่ยนผ่าน: คุณสมบัติ ระยะเวลา และจังหวะ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การเปลี่ยนผ่าน: คุณสมบัติ ระยะเวลา และจังหวะ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การเปลี่ยนผ่าน: คุณสมบัติ ระยะเวลา และจังหวะ”
เพิ่ม transition เพื่อทำให้การเปลี่ยนแปลงคุณสมบัติ CSS เคลื่อนไหวอย่างนุ่มนวล เลือกระยะเวลาที่เหมาะสม และเลือกฟังก์ชันการเร่ง เช่น ease-in-out คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การเปลี่ยนผ่าน: คุณสมบัติ ระยะเวลา และจังหวะ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม
ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- คุณสมบัติกำหนดเองของ CSS: การประกาศและการอัปเดต
- การเปลี่ยนผ่าน: คุณสมบัติ ระยะเวลา และจังหวะ
- แอนิเมชัน @keyframes
- การเคารพ prefers-reduced-motion