1

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>

1 respuesta 1

5

Agrega estas dos líneas en la barraroja:

animation: animar_negro 1s ease-in 0, animar_rojo 4s linear 1s;
animation-fill-mode: forwards;

Básicamente le estoy colocando un retardo de 1 segundo a la animación de la barra roja y la segunda línea hace que la segunda animación comience justo donde se quedó la primera.

.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 ease-in 0, animar_rojo 4s linear 1s;
  animation-fill-mode: forwards;
}

@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>

1
  • Era justamente lo que me faltaba, muchas gracias Jaime, me sirvió mucho tu respuesta Commented el 7 oct. 2021 a las 17:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.