my idea is that when I start my page several elements are displayed in order with that transition that I have in the example, it seems to me that it is a way to do it, but I think there must be a way in which I can animate the container and tell it that each child comes out and the next one comes out after the other, it is a way in which I can save code, because if I have many elements it would be very tedious to do all that for each one.
.contenedor1, .contenedor2, .contenedor3{
margin: 40px auto;
width: 50%;
background: red;
height: 30px;
scale: 0;
}
.contenedor1{
animation-name: con1;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes con1{
0%{
scale: 0;
}
100%{
scale: 1;
}
}
.contenedor2{
animation-name: con2;
animation-duration: 1s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
@keyframes con2{
0%{
scale: 0;
}
100%{
scale: 1;
}
}
.contenedor3{
animation-name: con3;
animation-duration: 1s;
animation-delay: 2s;
animation-fill-mode: forwards;
}
@keyframes con3{
0%{
scale: 0;
}
100%{
scale: 1;
}
}
<div class="con">
<div class="contenedor1"></div>
<div class="contenedor2"></div>
<div class="contenedor3"></div>
</div>
The way that seems most appropriate to me to do what you are looking for would be to use 1 same class to group all your containers, use document.getElementsByClassName to obtain all these containers using Javascript, and assign them the animationDelay parameter through a cycle.
Try it by adding the amount of container1 you want, and tell me how it works for you