Een verspringende animatie maken

Webfuncties: sibling-count() en sibling-index()

Met verspringende animaties kunt u een interessant effect maken waarbij meerdere geordende elementen opeenvolgend worden geanimeerd met een kleine vertraging tussen elk element, in plaats van dat ze allemaal tegelijk worden geanimeerd. Deze techniek wordt vaak gebruikt in lijsten, galerijen of navigatiemenu's om de aandacht van de gebruiker te trekken en interacties een verfijnd, ritmisch gevoel te geven.

Animaties spreiden met sibling-index()

Gebruik de property sibling-index() voor de property animation-delay, zodat de animatie voor elk element wordt verschoven met een getal dat evenredig is aan de positie in het bovenliggende element. De functie sibling-index() retourneert een geheel getal. Dit moet worden vermenigvuldigd met een tijdseenheid om het om te zetten in een tijd.

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

VERPLICHT: Respecteer de voorkeuren van gebruikers door de animatie uit te zetten voor gebruikers die de voorkeur geven aan minder beweging. 

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

Reservestrategieën

Test op ondersteuning voor sibling-index() met css met @supports (animation-delay: calc(sibling-index() * 0.1s)){} of JavaScript met !CSS.supports('animation-delay: calc(sibling-index() * 0.1s)').

Als je verspringende animaties wilt ondersteunen in oudere browsers, gebruik je JavaScript om een aangepaste eigenschap --sibling-index toe te voegen aan elk element op hetzelfde niveau. VERPLICHT: Plaats dit in een CSS.supports('animation-delay: calc(sibling-index() * 0.1s)')-test om te voorkomen dat onnodige JavaScript wordt uitgevoerd.

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

Voeg een animation-delay-declaratie toe die de aangepaste eigenschap --sibling-index gebruikt. De declaratie moet vóór de animation-delay-declaratie staan die de functie sibling-index() gebruikt. Dit hoeft niet te worden verpakt in @supports. Oudere browsers parseren de 2e declaratie niet en gebruiken de 1e declaratie.

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