0

quisiera saber como hago para que las animaciones sigan un orden consecutivo y no inicien todas al mismo tiempo.

body {
	text-align: center;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}
.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
 <h2 class="header animated zoomIn">Titulo</h2>
 <h5 class="animated zoomIn">Lorem ipsum dolor.</h5>
 <h5 class="animated zoomIn">Lorem ipsum dolor sit amet.</h5>
 <h5 class="animated zoomIn">Lorem ipsum dolor sit amet, consectetur adipiscing.</h5>
</div>
<div class="container">
 <div class="row">
  <div class="col l4 animated zoomIn">
	 <h1>1</h1>
	 <h5>Paso Uno</h5>
	 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit urna eget quam facilisis.</p>
	</div>
	<div class="col l4 animated zoomIn">
	 <h1>2</h1>
	 <h5>Paso Dos</h5>
	 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tortor lectus, ultricies.</p>
	</div>
	<div class="col l4 animated zoomIn">
	 <h1>3</h1>
	 <h5>Paso Tres</h5>
	 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus et leo.</p>
	</div>
 </div>
</div>

Agradezco su ayuda!

2
  • ¿Cuál es el orden que quieres que tengan?
    – Alvaro Montoro
    Commented el 3 jul. 2018 a las 3:00
  • Hola! primero el titulo, luego el primer lorem ipsum, luego el segundo lorem ipsum, luego el tercero y así mismo con los tres pasos; uno después del otro.
    – soyjohanm
    Commented el 3 jul. 2018 a las 3:05

1 respuesta 1

1

Para que no todas las animaciones empiecen al mismo tiempo, puedes usar la propiedad animation-delay para añadir un poco de retraso a las animaciones. De ese modo puedes darle algo de orden.

En el siguiente ejemplo, basado en tu código, he creado 7 clases: delay1, delay2, ... delay7 que añaden un animation-delay de 1, 2, ...7 segundos respectivamente y se lo he asignado a los elementos con .animated para que vayan apareciendo en orden:

body {
	text-align: center;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}
.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

.delay1 {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.delay2 {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.delay3 {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.delay4 {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.delay5 {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.delay6 {
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
}

.delay7 {
  -webkit-animation-delay: 7s;
  animation-delay: 7s;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
 <h2 class="header animated zoomIn delay1">Titulo</h2>
 <h5 class="animated zoomIn delay2">Lorem ipsum dolor.</h5>
 <h5 class="animated zoomIn delay3">Lorem ipsum dolor sit amet.</h5>
 <h5 class="animated zoomIn delay4">Lorem ipsum dolor sit amet, consectetur adipiscing.</h5>
</div>
<div class="container">
 <div class="row">
  <div class="col l4 animated zoomIn delay5">
	 <h1>1</h1>
	 <h5>Paso Uno</h5>
	 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit urna eget quam facilisis.</p>
	</div>
	<div class="col l4 animated zoomIn delay6">
	 <h1>2</h1>
	 <h5>Paso Dos</h5>
	 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tortor lectus, ultricies.</p>
	</div>
	<div class="col l4 animated zoomIn delay7">
	 <h1>3</h1>
	 <h5>Paso Tres</h5>
	 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus et leo.</p>
	</div>
 </div>
</div>

1
  • excelente!! eso era lo que buscaba. Gracias.
    – soyjohanm
    Commented el 3 jul. 2018 a las 3:14

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.