Loop con fotos con CSS3 Animations

Hola, estoy intentando hacer un loop con tres fotos para que se vayan entrelazando entre ellas con @keyframes y animation, por ejemplo cada 5 segundos, que se vayan viendo todas en la misma caja, una a una, no se si me explico, sería para la pagina principal, como presentación, ya lo tengo, pero no me acaba de salir correctamente y he probado mil cosas y nada, ¿¿Como puedo hacerlo??

gracias de antemano, os paso el codigo que llevo... y un pantallazo para que os hagais una idea

.mainphoto{
position: relative;
overflow: hidden;
width: 100%;
min-height: 900px;
}

.mainphoto img{
width: 60%;
border-radius: 40px;
}

#primaria{
position: absolute;
top: 5em;
left: 15em;
}

#secundaria{
position: absolute;
top: 5em;
left: 15em;
}

#terciaria{
position: absolute;
top: 5em;
left: 15em;
}

@keyframes animarPrimaria{
0%{
opacity: 0;
}

100%{
opacity: 1;
}
}

@keyframes animarSecundaria{
0%{
opacity: 0;
}

100%{
opacity: 1;
}
}

@keyframes animarTerciaria{
0%{
opacity: 0;
}

100%{
opacity: 1;
}
}

#primaria{
animation-name: animarPrimaria;
animation-duration: 3s;
animation-fill-mode: both;
animation-delay: 0;
}

#secundaria{
animation-name: animarSecundaria;
animation-duration: 3s;
animation-fill-mode: both;
animation-delay: 3s;
}

#terciaria{
animation-name: animarTerciaria;
animation-duration: 3s;
animation-fill-mode: both;
animation-delay: 6s;
}