Comment animer les lignes de tableau une par une

Question

J'ai une table avec 100 lignes. Elle vient dynamiquement de la base de données. Je dois animer chaque ligne une par une.

                            Abraham
                            076 9477 4896
                            294-318 
                            200 

                            Abraham
                            076 9477 4896
                            294-318 
                            200

                            Phelan
                            0500 034548
                            680-1097 Mi Rd.
                            200

                            Raya
                            (01315) 27698
                            Ap #289-

Answer 1

Essayez ce code :

$("table tr").hide();
$("table tr").each(function(index){
    $(this).delay(index*500).show(1000);
});

Abraham
076 9477 4896
294-318 
200 

Abraham
076 9477 4896
294-318 
200

Phelan
0500 034548
680-1097 Mi Rd.
200

Raya
(01315) 27698
Ap #289-

Answer 2

J'utilise css mais je mets à chaque tr - animation-delay en jquery...

J'utilise aussi :not(:first-child) pour exclure l'en-tête du tableau (premier tr)

$("tr:not(:first-child)").each(function (index ) {
   $(this).css('animation-delay',index *0.5 +'s');
});  

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}
 tr:not(:first-child){    
  opacity: 0;
  animation-name: fadeIn;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

    Compagnie
    Contact
    Pays

    Alfreds Futterkiste
    Maria Anders
    Allemagne

    Centro comercial Moctezuma
    Francisco Chang
    Mexique

    Ernst Handel
    Roland Mendel
    Autriche

    Island Trading
    Helen Bennett
    Royaume-Uni

    Laughing Bacchus Winecellars
    Yoshi Tannamuri
    Canada

    Magazzini Alimentari Riuniti
    Giovanni Rovelli
    Italie