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!