Esempio di animation-delay progressivo con LESS e SASS.

Obiettivo: animare blocchi a comparsa in modo che compaiano in modo sequenziale, con un lieve ritardo nell’animazione di ogni elemento.

Nella visualizzazione di liste, icone, menu o blocchi può essere interessante animare la comparsa di questi elementi in modo che entrino “in scena” uno dopo l’altro in istanti di tempo successivi. Fare manualmente questa operazione può essere frustrante, ma puoi usare questa funzione LESS per aggiungere alla tua lista questo effetto grafico.

L’esempio in basso utilizza la proprietà CSS:

animation-delay: 100ms

Un altro esempio:

Ecco la funzione LESS che puoi includere nel tuo progetto.

@delay-between: 100ms; /* millisecondi tra un blocco e l'altro */ 

.delays(@n, @i: 0) when (@i =< @n) {
    &:nth-child(@{i}) {
        animation-delay: @delay-between * @i;
    }
    .delays(@n, (@i + 1));
}

richiamabile nel seguente modo:

selector {
    animation: ...;  /* aggiungere parametri */
    .delays(n); /* Dove n è il numero di blocchi */
}

(Update agosto 2019) ecco invece lo stesso codice, in linguaggio SASS:

    selector{
      animation: ...;  /* aggiungere parametri */
      @for $i from 0 to 50 { /* Dove 50 è il numero di blocchi */
        &:nth-child(#{$i + 1}) {
          animation-delay: $i * 0.1s;
        }
      }
    }