การสร้างภาพเคลื่อนไหวแบบสลับกัน

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

จัดเรียงภาพเคลื่อนไหวแบบสลับตำแหน่งด้วย sibling-index()

ใช้พร็อพเพอร์ตี้ sibling-index() ในพร็อพเพอร์ตี้ animation-delay เพื่อให้อนิเมชันในแต่ละองค์ประกอบมีการออฟเซ็ตตามตัวเลขที่สอดคล้องกับตำแหน่งในองค์ประกอบหลัก ฟังก์ชัน sibling-index() จะแสดงผลเป็นจำนวนเต็ม จึงต้องคูณด้วยหน่วยเวลาเพื่อแปลงเป็นเวลา

#stagger-list > .item {
  --stagger-time: 0.1s;
  /* Define the animation first */
  animation: fade-in 0.4s;
  /* Set the `animation-delay` to a time multiplied by the `sibling-index()` */
  animation-delay: calc(sibling-index() * var(--stagger-time))
}

บังคับ: เคารพค่ากำหนดของผู้ใช้โดยปิดใช้ภาพเคลื่อนไหวสำหรับผู้ใช้ที่ต้องการลดการเคลื่อนไหว

@media (prefers-reduced-motion: reduce){
  /* Disable animation for users who prefer reduced motion. */
  #stagger-list > .item {
    animation: none;
  }
}

กลยุทธ์สำรอง

ทดสอบการรองรับ sibling-index() โดยใช้ CSS กับ @supports (animation-delay: calc(sibling-index() * 0.1s)){} หรือ JavaScript กับ !CSS.supports('animation-delay: calc(sibling-index() * 0.1s)')

หากต้องการรองรับภาพเคลื่อนไหวแบบสลับกันในเบราว์เซอร์รุ่นเก่า ให้ใช้ JavaScript เพื่อเพิ่ม--sibling-index คุณสมบัติที่กำหนดเอง ลงในองค์ประกอบข้างเคียงแต่ละรายการ บังคับ: รวมโค้ดนี้ไว้ในการทดสอบ CSS.supports('animation-delay: calc(sibling-index() * 0.1s)') เพื่อหลีกเลี่ยงการเรียกใช้ JavaScript ที่ไม่จำเป็น

if(!CSS.supports('animation-delay: calc(sibling-index() * 0.1s)')){
  const staggerList = document.getElementById('stagger-list');
  [...staggerList.children].forEach((el, index)=>el.style.setProperty('--sibling-index', index + 1));
}

เพิ่มการประกาศ animation-delay ที่ใช้คุณสมบัติที่กำหนดเอง --sibling-index โดยต้องอยู่ก่อนการประกาศ animation-delay ที่ใช้ฟังก์ชัน sibling-index() ไม่จำเป็นต้องรวมไว้ใน @supports เนื่องจากเบราว์เซอร์รุ่นเก่าจะไม่แยกวิเคราะห์การประกาศที่ 2 และจะใช้การประกาศแรก

#stagger-list > .item {
  animation-delay: calc(var(--sibling-index) * var(--stagger-time));
  animation-delay: calc(sibling-index() * var(--stagger-time));
}