ระยะเวลาและจังหวะของคุณสมบัติการเปลี่ยนผ่าน
กำหนดว่าคุณสมบัติใดจะเปลี่ยนผ่าน ใช้เวลานานเท่าใด และจะเริ่มเมื่อใดด้วยการหน่วงเวลา
ระยะเวลาและจังหวะของคุณสมบัติการเปลี่ยนผ่าน เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
ทรานซิชัน CSS คืออะไร
ทรานซิชัน CSSจะคั่นค่าระหว่างค่าของคุณสมบัติสองค่าในช่วงเวลาที่ระบุ เมื่อค่าดังกล่าวเปลี่ยนแปลง เช่น เมื่อวางเมาส์ ไม่จำเป็นต้องใช้ JavaScript
คุณสมบัติ transition-property
ระบุว่าคุณสมบัติ CSS ใดจะแสดงแอนิเมชัน ใช้ all เพื่อทำทรานซิชันกับคุณสมบัติที่ทำแอนิเมชันได้ทั้งหมด หรือระบุรายการคุณสมบัติที่ต้องการ
<button>Save changes</button>คุณสมบัติ transition-duration
กำหนดระยะเวลาที่ทรานซิชันใช้ รองรับค่าเวลาเป็นวินาที (s) หรือมิลลิวินาที (ms)
<div class="card">Card</div>รูปแบบย่อของ transition
รวมคุณสมบัติย่อยของทรานซิชันทั้งสี่รายการ ได้แก่ property | duration | timing-function | delay
<button class="btn">Submit</button>ทรานซิชันหลายรายการ
ระบุทรานซิชันหลายรายการโดยคั่นด้วยเครื่องหมายจุลภาค เพื่อทำแอนิเมชันให้คุณสมบัติแต่ละรายการอย่างอิสระ:
<div class="card">Card</div>คุณสมบัติ transition-delay
หน่วงเวลาการเริ่มต้นของทรานซิชัน เหมาะสำหรับการจัดลำดับแอนิเมชัน หรือให้ทรานซิชันหนึ่งทำงานเสร็จก่อนที่อีกทรานซิชันจะเริ่ม
<nav>
<a class="nav-item" href="#">Home</a>
<a class="nav-item" href="#">About</a>
<a class="nav-item" href="#">Contact</a>
</nav>ทรานซิชันบนสถานะพื้นฐาน
วางคุณสมบัติ transition ไว้บนสถานะพื้นฐานเสมอ ไม่ใช่สถานะ :hover วิธีนี้ช่วยให้ทรานซิชันทำงานทั้งตอนเริ่มวางเมาส์และตอนเลื่อนเมาส์ออก
<button class="btn demo-active">Hover me</button>คุณสมบัติใดบ้างที่ทำทรานซิชันได้
คุณสมบัติ CSS ที่เป็นตัวเลขส่วนใหญ่สามารถทำทรานซิชันได้ เช่น สี ขนาด ความทึบ และการแปลงรูปทรง เป็นต้น คุณสมบัติแบบไม่ต่อเนื่อง เช่น display ไม่สามารถคั่นค่าอย่างราบรื่นได้ แต่จะเปลี่ยนค่าแบบฉับพลัน
คำเตือนเกี่ยวกับ transition: all
การใช้ transition: all อาจทำให้เกิดแอนิเมชันที่ไม่คาดคิดกับคุณสมบัติที่คุณไม่ได้ตั้งใจให้เคลื่อนไหว ในโค้ดสำหรับใช้งานจริงควรระบุคุณสมบัติอย่างชัดเจนเสมอ
การทำทรานซิชันสี
ทรานซิชันสีจะคั่นค่าระหว่างสีต่าง ๆ ควรใช้รูปแบบสีเดียวกันเพื่อให้ได้ผลลัพธ์ที่ดีที่สุด:
<button class="btn demo-active">Hover me</button>ทรานซิชันกับการคำนวณเลย์เอาต์ซ้ำ
เพื่อประสิทธิภาพ ควรหลีกเลี่ยงการทำทรานซิชันกับคุณสมบัติที่ทำให้เกิดเลย์เอาต์ใหม่ เช่น width height margin และ padding เนื่องจากจะทำให้คำนวณเลย์เอาต์ใหม่ในทุกเฟรมของแอนิเมชัน ควรใช้ transform และ opacity แทน
ตรวจสอบความเข้าใจอย่างรวดเร็ว
ควรวางคุณสมบัติ transition ไว้ที่ใดเพื่อให้ทำงานทั้งตอนเริ่มวางเมาส์และตอนเลื่อนเมาส์ออก
สรุปทบทวน
ทรานซิชัน CSS ทำให้การเปลี่ยนแปลงคุณสมบัติเกิดขึ้นอย่างราบรื่นตามเวลา โดยใช้ transition-property duration timing-function และ delay วางทรานซิชันไว้บนสถานะพื้นฐานเพื่อให้แอนิเมชันทำงานได้ทั้งสองทิศทาง เพื่อประสิทธิภาพและความแน่นอน ควรระบุรายการคุณสมบัติที่ต้องการแทนการใช้ all
เรียนรู้ CSS ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 40
- บทเรียน
- 159
คำถามที่พบบ่อย
บทเรียน “ระยะเวลาและจังหวะของคุณสมบัติการเปลี่ยนผ่าน” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ระยะเวลาและจังหวะของคุณสมบัติการเปลี่ยนผ่าน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ระยะเวลาและจังหวะของคุณสมบัติการเปลี่ยนผ่าน”
กำหนดว่าคุณสมบัติใดจะเปลี่ยนผ่าน ใช้เวลานานเท่าใด และจะเริ่มเมื่อใดด้วยการหน่วงเวลา คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “ระยะเวลาและจังหวะของคุณสมบัติการเปลี่ยนผ่าน” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ระยะเวลาและจังหวะของคุณสมบัติการเปลี่ยนผ่าน
- ฟังก์ชันผ่อนความเร็ว: ease linear cubic-bezier
- การเปลี่ยนผ่านคุณสมบัติหลายรายการ
- ประสิทธิภาพ: คุณสมบัติที่แปลงได้เทียบกับคุณสมบัติที่ต้องวาดใหม่