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 el 18 nov. 2021 a las 16:51
  • 1
    @BatmanDorado de nada. Marca la respuesta como aceptada porfavor. Gracias
    – hawks
    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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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