Estimados amigos, estoy empezando con esto de animar con css y quiero hacer algo como lo que sigue:
Quiero tener 3 títulos, con sus respectivas bajadas, es decir algo así
Código:
<div class="Titulo1">Titulo 1</div>
<div class="bajada1">Esta es la bajada del titulo 1</div>
<div class="Titulo2">Titulo 2</div>
<div class="bajada2">Esta es la bajada del titulo 2</div>
<div class="Titulo3">Titulo 3</div>
<div class="bajada3">Esta es la bajada del titulo 3</div>
La idea mía es cargar el primero desde la izquierda y permanezca un par de segundos y salga por la izquierda, y luego el segundo haga lo mismo y el tercero, y se repita.
He avanzado en algo pero con el primero e igual tengo algunos problemas, como por ejemplo que pretendo que el div se cargue al 20% de la izquierda pero luego de un rato queda al 0 y no desparece... Necesito de su ayuda!!!
Esto es lo que tengo
Código CSS:
Ver original.animaciones{
position:relative;top:20%;
overflow: hidden;
width: 100%;
height: 200px;
}
.animaciones .titulo1 {
position:relative;
-webkit-animation: slideInTitulo1 4s 0 1;
}
.animaciones .bajada1 {
position:relative;
left:-20%;
-webkit-animation: slideInBajada1 4s 1s 1;
}
@-webkit-keyframes slideInTitulo1 {
0%{visibility:block;margin-left:-100%;}
10%{visibility:block;margin-left:20%;}
100%{visibility:block;margin-left:20%;}
}
@-webkit-keyframes slideInBajada1 {
0%{visibility:block;margin-left:-100%;}
10%{visibility:block;margin-left:20%;}
100%{visibility:block;margin-left:20%;}
}
Código HTML:
Ver original<link rel="stylesheet" href="css/indexAnimaciones2.css" media="screen" /> <div class="animaciones"> <div class="bajada1">Esta es la Bajada 1
</div>