keyframes y animation

[garciasanchezdani]

Hola amig@s, llevo un rato peleándome con las animaciones, y no consigo hacer que se queden bien...
Tengo 2 divs, y este es el css para ellos:

Código CSS:

@-webkit-keyframes uno{
     from {
       opacity: 0.0;
       font-size: 100%;
     }
     to {
       opacity: 1.0;
       font-size: 100%;
     }
}
 
#div1
{       
  -webkit-animation-name: uno;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
}
 
@-webkit-keyframes dos{
     from {
       opacity: 0.0;
       font-size: 100%;
     }
     to {
       opacity: 1.0;
       font-size: 100%;
     }
}
 
#div2
{       
  -webkit-animation-name: dos;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
  -webkit-animation-delay:15s;
   opacity: 0.0;
}
 

Como podéis ver, para el div2 le pongo inicialmente opacity: 0.0 para que no se vea, y -webkit-animation-delay:15s para que espere a que el primer div termine y entonces se muestra el div2....pero al final acaban cruzándose....y no encuentro la manera de que no se crucen......
No sé si me explico, yo lo que busco es que cada 10 segundos se muestre el contenido de un div.

Saludos y gracias de antemano, Daniel