إنشاء حركة متدرجة

توفّر الرسوم المتحركة المتدرجة تأثيرًا مثيرًا للاهتمام، حيث يتم تحريك عناصر متعددة مرتّبة بشكل تسلسلي مع تأخير بسيط بين كل منها، بدلاً من تحريكها كلها في وقت واحد. غالبًا ما تُستخدم هذه التقنية في القوائم أو المعارض أو قوائم التنقل لتوجيه عين المستخدم وإضافة شعور مصقول وإيقاعي إلى التفاعلات.

تأخير ظهور الصور المتحركة باستخدام 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، لأنّ المتصفّحات القديمة لن تحلّل البيان الثاني وستستخدم البيان الأول.

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