Adicionando animação CSS com atraso para cada item da lista [duplicado]
Esta pergunta já tem uma resposta aqui:
Como fazer com que cada tag <li> apareça lentamente, uma após a outra 1 respostaEstou tentando escrever um jquery que passará por um elemento de lista / dom não ordenado especificado e atribua uma classe CSS (animação) a cada item / filho da lista. Também quero criar um tempo de atraso ajustável entre o .addClass.
Tudo o que tentei falhou miseravelmente.
Por exemplo
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Torna-se
<ul>
<li class="animation">Item 1</li>
(50ms delay)
<li class="animation">Item 2</li>
(50ms delay)
<li class="animation">Item 3</li>
(50ms delay)
<li class="animation">Item 4</li>
(50ms delay)
</ul>
Alguma ideia