יצירת אנימציה מדורגת

אנימציות מדורגות מספקות אפקט מעניין שבו כמה רכיבים מסודרים מונפשים ברצף עם השהיה קלה בין כל אחד מהם, במקום שכולם יונפשו בבת אחת. הטכניקה הזו משמשת לעיתים קרובות ברשימות, בגלריות או בתפריטי ניווט כדי להנחות את העין של המשתמש ולהוסיף תחושה קצבית ומלוטשת לאינטראקציות.

אנימציות מדורגות באמצעות 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));
}