Kademeli animasyon oluşturma

Web özellikleri: sibling-count() ve sibling-index()

Kademeli animasyonlar, birden fazla sıralı öğenin aynı anda değil, her biri arasında hafif bir gecikmeyle sırayla canlandırıldığı ilginç bir efekt sağlar. Bu teknik genellikle listelerde, galerilerde veya gezinme menülerinde kullanıcının gözünü yönlendirmek ve etkileşimlere şık, ritmik bir his katmak için kullanılır.

sibling-index() ile animasyonları kademelendirme

Her öğedeki animasyonun, üst öğedeki konumuna orantılı bir sayıyla dengelenmesi için animation-delay özelliğinde sibling-index() özelliğini kullanın. sibling-index() işlevi bir tam sayı döndürür. Bu nedenle, zamana dönüştürülmesi için bir zaman birimiyle çarpılması gerekir.

#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))
}

ZORUNLU: Daha az hareket tercih eden kullanıcılar için animasyonu devre dışı bırakarak kullanıcı tercihlerine saygı gösterin. 

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

Yedek stratejiler

sibling-index() desteğini test etmek için @supports (animation-delay: calc(sibling-index() * 0.1s)){} ile CSS'yi veya !CSS.supports('animation-delay: calc(sibling-index() * 0.1s)') ile JavaScript'i kullanın.

Eski tarayıcılarda kademeli animasyonları desteklemek için JavaScript kullanarak her eşdüzey öğeye --sibling-index özel nitelik ekleyin. ZORUNLU: Gereksiz JavaScript çalıştırmamak için bunu bir CSS.supports('animation-delay: calc(sibling-index() * 0.1s)') testine sarmalayın.

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));
}

--sibling-index özel niteliğini kullanan bir animation-delay bildirimi ekleyin. sibling-index() işlevini kullanan animation-delay beyanından önce olmalıdır. Bunun @supports içine alınması gerekmez. Eski tarayıcılar ikinci beyanı ayrıştırmaz ve ilk beyanı kullanır.

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