mi idea es que al iniciar mi pagina se muestren varios elementos por orden con ese transición que tengo en el ejemplo, me parece que es una forma de hacerlo, pero creo que debe haber una forma en la que pueda animar el contenedor y decirle que cada hijo salga y qué el siguiente salga después del otro, es una forma en la que puedo ahorrar código, porque si tengo muchos elementos seria muy tedioso hacer todo eso por cada uno.
.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>