Dudas con animaciones CSS3

[mening]

Hola!

Espero que este sea el primero de muchos mensajes en el foro ya que me parecéis una gran comunidad.
Paso a exponer mi duda.
Estoy haciendo una web app para iphone y quiero hacer un bocadillo animado al estilo de la version web de google maps para iphone ( si entrais desde el iPhone sabreis a lo que me refiero ). El bocadillo tiene información de como añadir la web app a la pantalla de inicio.

La animacion la hago con CSS ya que queria intentar escapar de JS

Código:

@-webkit-keyframes bocadillo {
       from {
         bottom: 0px;
       }
       to {
         top: 0px;
       }
      }
	  
	  
.div_animado_principal{

	position: absolute; 
	z-index: 5000;
	width: 100%;
	left: 0px;
	top: 150px;
	margin-top: 290px;
	-webkit-animation-name: bocadillo;
    -webkit-animation-duration: 4s;
    -webkit-animation-delay: 1s;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-direction: alternate;
}

Mi duda es la siguiente: Como consigo que ese bocadillo se quede parado unos segundos entre las dos animaciones ?. Tampoco se como hacer que ese bocadillo no se vea al hacer scroll en el iPhone ( supongo que la solución mas facil es quitarle el scroll al index, pero no lo consigo :( ). Y si se pudiese quitar la animación una vez se añada a la pantalla de inicio ya seria genial :D

Un saludo y espero no causaros muchos problemas.

Muchas gracias!!!