Estoy trabajando en lo siguiente:

Código de violín

Aquí está HTML:

<div id="animation">
  <ul>
    <li>this is</li>
    <li>CSS3 looped</li>
    <li>animation</li>
   </ul>
 </div>

Este es el CSS:

#animation {
    height: 100%;
    width: 100%;
}
#animation ul {
    position: relative;
    text-align: center;
    width: 100%;
}
#animation li {
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    opacity: 0;
    padding: 10px;
}
#animation li:nth-of-type(1) {
    -webkit-animation: fadein 6s ease-in-out -4s infinite alternate;
    -moz-animation: fadein 6s ease-in-out -4s infinite alternate;
    animation:fadein 6s ease-in-out -4s infinite alternate;
}
#animation li:nth-of-type(2) {
    -webkit-animation: fadein 6s ease-in-out 0s infinite alternate;
    -moz-animation: fadein 6s ease-in-out 0s infinite alternate;
    animation: fadein 6s ease-in-out 0s infinite alternate;
}
#animation li:nth-of-type(3) {
    -webkit-animation: fadein 6s ease-in-out 4s infinite alternate;
    -moz-animation: fadein 6s ease-in-out 4s infinite alternate;
    animation: fadein 6s ease-in-out 4s infinite alternate;
}
@-webkit-keyframes fadein {
    0% {
        opacity: 0;
    }
    66% {
        opacity: 0;
    }
    76% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes fadein {
    0% {
        opacity: 0;
    }
    66% {
        opacity: 0;
    }
    76% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadein {
    0% {
        opacity: 0;
    }
    66% {
        opacity: 0;
    }
    76% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

Soy nuevo en CSS3 y con el código quiero pegar párrafos en lugar de un par de palabras. Mi pregunta es, cuando el texto se desvanece, ¿cómo puede mantenerlo en la pantalla durante, por ejemplo, 10 segundos para que alguien pueda leerlo y desaparecer en el siguiente párrafo?

He usado la duración y el retraso, realmente no parece funcionar de la manera que quería. Cualquier ayuda será genial.