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 php : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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