1

Tengo el siguiente html con una animación hecha en css, en este momento se le aplica a los tres divs juntos y al mismo tiempo, pero necesito que se le aplique a cada div con la clase content por separado, uno a la vez.

.base {
  height: 200px;
  width: 200px;
  background-color: #243034;
  border: 1px solid #fff;
}

.content {
  height: 50px;
  width: 147px;
  margin: 10px;
  background-color: #41555C;
  border: 1px solid #fff;
}

.content {
  animation-duration: 3s;
  animation-name: animation;
  animation-iteration-count: infinite;
}

@keyframes animation {
  from {
    margin-left: 100%;
    width: 300%
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
<div class="base">
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div> 
</div>

2 respuestas 2

3

Puedes añadir una clase unica a cada div para identificarlo en css y aplicar propiedades distintas a cada uno.

La clase .content actua como clase base para los 3 divs, añade las propiedades compartidas por los 3. La clase .content-x identifica cada bloque para añadir comportamiento unico.

He modificado tu animación porque exactamente no se el comportamiento final esperado.

.base {
  height: 200px;
  width: 200px;
  background-color: #243034;
  border: 1px solid #fff;
}

.content {
  height: 50px;
  width: 147px;
  margin: 10px;
  background-color: #41555C;
  border: 1px solid #fff;
}

.content {
  animation-duration: 3s;
  animation-name: animation;
  animation-iteration-count: 1;
}

.content-1 {
  animation-delay: 0.5s;
}

.content-2 {
  animation-delay: 1s;
}

.content-3 {
  animation-delay: 1.5s;
}

@keyframes animation {
  from {
    margin-left: 100%;
    width: 300%
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
<div class="base">
  <div class="content content-1"></div>
  <div class="content content-2"></div>
  <div class="content content-3"></div> 
</div>

2
  • Es justo lo que necesito, muchas gracias Commented el 18 nov. 2021 a las 16:51
  • 1
    @BatmanDorado de nada. Marca la respuesta como aceptada porfavor. Gracias
    – hawks
    Commented el 18 nov. 2021 a las 17:32
3

También hay otra manera de hacerlo sin tocar el html y es que con nth-childpuedes acceder a cada elemento que tenga la clase y asi puedes darle a cada uno un comportamiento diferente. Te pongo el código por si te sirve para futuras ideas:

.base {
  height: 200px;
  width: 200px;
  background-color: #243034;
  border: 1px solid #fff;
}

.content {
  height: 50px;
  width: 147px;
  margin: 10px;
  background-color: #41555C;
  border: 1px solid #fff;
}

.content:first-child {
  animation-duration: 3s;
  animation-name: animation;
  animation-iteration-count: infinite;
  animation-delay: 0.5s;
  
}

.content:nth-child(2) {
  animation-duration: 3s;
  animation-name: animation;
  animation-iteration-count: infinite;
  animation-delay: 1s;
  
}

.content:nth-child(3) {
  animation-duration: 3s;
  animation-name: animation;
  animation-iteration-count: infinite;
  animation-delay: 1.5s;
  
}

@keyframes animation {
  from {
    margin-left: 100%;
    width: 300%
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
<div class="base">
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div> 
</div>

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.