العدد الكلي للإخوة sibling-count()

الصياغة

li {
  animation-delay: calc((sibling-count() - sibling-index()) * 80ms);
}

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

<style>
  .demo-list2 { list-style: none; padding: 0; }
  .demo-list2 li {
    background: #dbeafe; margin: 4px 0; padding: 8px 12px; border-radius: 6px;
    animation: fade-up 0.4s ease both;
    animation-delay: calc((4 - sibling-index()) * 120ms); /* محاكاة: قائمة من 4 عناصر */
  }
  @keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
</style>
<ul class="demo-list2">
  <li>يظهر آخرًا</li>
  <li>الثالث</li>
  <li>الثاني</li>
  <li>يظهر أولًا</li>
</ul>

أهم القيم

💡 نصائح عملية

• دمجها مع sibling-index() هو استخدامها الأشيع: calc((sibling-count() - sibling-index()) * قيمة) لعكس الاتجاه
• مفيدة أيضًا لتوزيع زوايا متساوية على عناصر دائرية حسب موقع كل عنصر من العدد الكلي

⚠️ أخطاء شائعة

• استخدامها وحدها متوقّعًا ترتيب العنصر → هي تعطي العدد الكلي فقط؛ الترتيب يأتي من sibling-index()
• استخدامها بلا بديل احتياطي في مشروع يستهدف Firefox → نفس قيد sibling-index() تمامًا؛ القيمة غير المدعومة تُهمَل بصمت

خصائص ذات صلة