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%;}
}