Animation css avec BD

Bonjour,

J'ai une page php qui appelle des datas depuis une BD. J'aimerais faire en sorte que chaque items apparaissent une fois que l'item précédent est apparut et que chacun reste affiché.

Voici mon

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
 
if ($connexion) {
 // Effectuer la requête
 $query = "SELECT * FROM asset_Services";
 $result = mysqli_query($connexion, $query);
 echo '<ul id="list">';
 // Afficher les lignes du tableau en fonction de la réponse à la requête
 $index = 0;
  if ($result) {
    while($row = mysqli_fetch_assoc($result)) {
      $br = (($index = ($index + 1) % 4) ? "" : "<br>");
      echo '<li id="slider-'.$row["id"].'"><a href=""><h5 style="margin-top:20px">'.$row["nom"].'</h5></a>' . $br . '</li>';
    }
  }
 echo '</ul>';
 // Fermer la connexion
 
}
?>

Ainsi que mon code css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
#list {
	margin: 2em auto;
	padding: 0;
	max-width: 70%;
	list-style: none;
	height: 100%;
}
 
#list a{
	color: #ccc;
}
 
#list h5 {
	color:#fff;
	margin-bottom:30px;
}
 
#list li {
	float: left;
	width: 250px;
	height: 100px;
	background: #012257;
	text-align: center;
	line-height: 20px;
	opacity: 0;
	border-radius: 10px;
	margin-bottom:20px;
	margin-right:30px;
 
}
 
#slider-1 {
	animation: fadeIn 5s 1 ease-in;
	animation-duration: 5s;
	animation-delay: 5s;
	opacity:1;
}
 
#slider-2 {
	animation: fadeIn 5s 1 ease-in;
	animation-duration: 5s;
	animation-delay: 10s;
	opacity:1;
}
#slider-3 {
	animation: fadeIn 5s 1 ease-in;
	animation-duration: 5s;
	animation-delay: 15s;
	opacity:1;
}
 
#slider-4 {
	animation: fadeIn 5s 1 ease-in;
	animation-duration: 5s;
	animation-delay: 20s;
	opacity:1;
}
#slider-5 {
	animation: fadeIn 5s 1 ease-in;
	animation-duration: 5s;
	animation-delay: 25s;
	opacity:1;
}
 
 
 
 
@keyframes fadeIn {
	from {
		display: none;
		opacity: 0;
		transform: translate3d(0, -20%, 0);
	}
	to {
		display: block;
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

Chaque item de la liste porte un numéro unique (pris depuis le id de l'item).

Merci