Animación de varios DIV

Bluesman74cl · #1 (**permalink**) 29/01/2015, 07:26

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<html>
<head>
    <title>titulo</title> <meta charset="utf-8">
<link rel="stylesheet" href="css/indexAnimaciones2.css"  media="screen" />
</head>
<body>
            <div class="animaciones">
                <div class="titulo1">
                    <h1>Titulo 1</h1>
                </div>
                <div class="bajada1">Esta es la Bajada 1</div>
                            
            </div>
</body>
</html>

moro666 · #2 (**permalink**) 05/02/2015, 08:54

No se si entendí del todo lo que quieres hacer, pero sea como sea, cuando la animación se acaba esto se queda como lo has declarado, así que añadiendo la posición final de titulo1 cuando la animación acabe este se quedara como tu quieras. Para que el bajada se quede ahí un rato solo le tienes que dar mas porcentaje en la posición que quieras!

Código CSS:

Ver original.animaciones{
        position:relative;top:20%;  
        overflow: hidden;
        width: 100%;
        height: 200px; 
   }
   .titulo1{
   margin-left:20%;
   }
  .animaciones .titulo1 {
     position:relative;
     -webkit-animation: slideInTitulo1 4s 0 1;
  }
   
  .animaciones .bajada1 {
     position:relative;
     left:-20%;
     -webkit-animation: slideInBajada1 4s;
  }
    
    @-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%;}
        80%{visibility:block;margin-left:20%;}
        100%{visibility:block;margin-left:-100%;}
    }

Bluesman74cl · #3 (**permalink**) 05/02/2015, 14:21

Muchas gracias moro666, amm la idea no se entendió, pero creo que lo voy a hacer con Jquery. Hoy me voy a dar ese trabajo.