Estimados estaría agradecido de su ayuda, estoy intentando animar unas barras de progreso, las cuales son 3 elementos hr, una barra gris que representa el 100%, una barra negra que representa el 70% y una barra roja que representa el 80% que vendría siendo el máximo.
La barra negra la animo sin ningún problema, ya que es una animación que va desde un ancho 0 a 70%, La barra roja me gustaría que fuera con una animación de 0 a 70% para que dure el mismo tiempo que la barra negra y luego animas desde un 70% a un 80%, pero de forma mas lenta, adjunto los estilos actuales, pero aun no consigo que queden bien sincronizadas, no se si me estará faltando algo
.barragris {
background-color: #AEAEAE;
border: 0;
height: 5px;
width: 100%;
}
.barranegra {
background-color: #000;
border: 0;
height: 5px;
position: absolute;
left: 0;
top: 0;
width: 70%;
animation: animar_negro 1s ease-in;
}
.barraroja {
background-color: red;
border: 0;
height: 5px;
width: 80%;
position: absolute;
left: 0;
top: 0;
animation: animar_negro 1s, animar_rojo 4s
}
@keyframes animar_negro {
from {
width: 0;
}
to {
width: 70%;
}
}
@keyframes animar_rojo {
from {
width: 70%;
}
to {
width: 80%;
}
}
<div class="container">
<div class="row">
<div class="col-12 position-relative">
<hr class="barragris">
<hr class="barraroja">
<hr class="barranegra">
</div>
</div>
</div>