0Pricing
CSS Academy · บทเรียน

การเชื่อมต่อและจัดลำดับแอนิเมชัน

สร้างลำดับที่ซับซ้อนโดยเชื่อมต่อแอนิเมชันหลายรายการด้วยการหน่วงเวลาที่เหลื่อมกัน

การเชื่อมต่อและจัดลำดับแอนิเมชัน เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุใดจึงต้องจัดลำดับแอนิเมชัน

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

ใช้ความหน่วงของแอนิเมชันเพื่อจัดลำดับ

การจัดลำดับที่ง่ายที่สุดคือคำนวณว่าแอนิเมชันถัดไปควรเริ่มเมื่อใดโดยอ้างอิงจากระยะเวลาของแอนิเมชันก่อนหน้า:

<div class="element">Slides in, then fades out</div>

คีย์เฟรมหลายขั้นตอน

แนวทางที่สะอาดที่สุดสำหรับองค์ประกอบเดียวคือเข้ารหัสลำดับทั้งหมดไว้ในกฎ @keyframes เดียว โดยใช้จุดผ่านที่เป็นเปอร์เซ็นต์:

<div class="toast">Notification toast</div>

คุณสมบัติกำหนดเองของ CSS สำหรับระยะเวลา

เก็บระยะเวลาไว้ในตัวแปร CSS เพื่อประสานงานแอนิเมชันที่เชื่อมต่อกันได้ง่าย:

<div class="box">Custom-property-driven timing</div>

ไทม์ไลน์แอนิเมชัน (สมัยใหม่)

ส่วนติดต่อโปรแกรมแอนิเมชันบนเว็บและแอนิเมชันที่เชื่อมโยงกับการเลื่อน (ScrollTimeline) ช่วยให้จัดลำดับที่ซับซ้อนได้โดยไม่ต้องคำนวณความหน่วง นี่คืออนาคตของการควบคุมลำดับแอนิเมชัน CSS ที่ซับซ้อน

การทยอยด้วยคุณสมบัติกำหนดเองของ CSS

ขับเคลื่อนความหน่วงแบบทยอยจากคุณสมบัติกำหนดเองของ CSS ที่กำหนดไว้ในแท็กหรือผ่าน JavaScript:

<div class="item" style="--delay:0ms">Item 1</div>
<div class="item" style="--delay:120ms">Item 2</div>
<div class="item" style="--delay:240ms">Item 3</div>

การจัดลำดับด้วย JavaScript

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

แอนิเมชันดึงดูดความสนใจ

ลำดับแอนิเมชันที่เต้นเป็นจังหวะแล้วค่อยนิ่งลงเพื่อดึงดูดความสนใจ:

<div class="notification">New message!</div>

เหตุการณ์ AnimationEnd

รับฟัง animationend ใน JavaScript เพื่อเรียกขั้นตอนถัดไปผ่านโปรแกรม:

<div class="box" id="ae-box">Watch me</div>
<script>
  const el = document.getElementById('ae-box');
  el.addEventListener('animationend', (e) => {
    if (e.animationName === 'slideIn') {
      el.classList.add('phase-2');
      el.textContent = 'animationend fired!';
    }
  });
</script>

รูปแบบการเปลี่ยนผ่านหน้า

ลำดับการเปลี่ยนผ่านหน้า CSS โดยสลับคลาส:

<div class="page-leaving">Leaving page</div>
<div class="page-entering">Entering page</div>

โครงร่างสถานะกำลังโหลด

แอนิเมชันโครงร่างขณะโหลดหลายขั้นตอนโดยใช้ค่าชดเชย:

<div class="skeleton-text"></div>
<div class="skeleton-text"></div>
<div class="skeleton-text"></div>

ตรวจสอบอย่างรวดเร็ว

วิธีที่ดีที่สุดในการเข้ารหัสลำดับแอนิเมชันหลายขั้นตอนให้ครบถ้วนสำหรับองค์ประกอบเดียวใน CSS คืออะไร

ทบทวน

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

คำถามที่พบบ่อย

บทเรียน “การเชื่อมต่อและจัดลำดับแอนิเมชัน” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การเชื่อมต่อและจัดลำดับแอนิเมชัน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การเชื่อมต่อและจัดลำดับแอนิเมชัน”

สร้างลำดับที่ซับซ้อนโดยเชื่อมต่อแอนิเมชันหลายรายการด้วยการหน่วงเวลาที่เหลื่อมกัน คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “การเชื่อมต่อและจัดลำดับแอนิเมชัน” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม

ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. ไวยากรณ์ @keyframes และคุณสมบัติแอนิเมชัน
  2. ทิศทาง โหมดเติม และจำนวนรอบของแอนิเมชัน
  3. การเชื่อมต่อและจัดลำดับแอนิเมชัน
  4. แอนิเมชันที่เข้าถึงได้ด้วย prefers-reduced-motion
← กลับไปที่ CSS Academy