Activar animation cuando el usuario la tiene en frente

[Anonimo12]

Buenas, tengo un duda muy sencilla que seguro que me podéis solucionar en un "plis plas".

En mi web tengo el siguiente bloque:

Código HTML:

<article class="two">
    <section class="text">
        <p class="quest">Título</p><br />
        <p class="answer">Texto</p>
    </section>
</article>
 

Y le tengo puesto una animación a la clase "quest" y otra a la clase "answer" con CSS:

Código CSS:

section.presentation article.two section.text {
    width: 50%;
}
 
section.presentation article.two section.text p.quest {
    font-size: 0.6em;
    animation: show-quest 1.5s;
}
 
section.presentation article.two section.text p.answer {
    font-size: 0.4em;   
    animation: show-answer 1.6s;
    animation-delay: 1s;
    -webkit-animation-delay: 1s
}
 

Las animaciones las hago con keyframes y funcionan perfectamente, no pongo el código porque es muy largo pero si es necesario me lo comentáis y lo coloco sin problema.

Ahora, antes de llegar al bloque de la animación hay otros bloques y textos.

Lo que no consigo hacer es que la animación se active únicamente cuando el usuario baja la página hasta tener en frente el article que la contiene. Por tanto, nada mas cargar la página se ejecuta y cuando el usuario llega abajo no la ve ¡dish!.

He intentado hacerlo con las pseudo-clases hover y focus pero nada. Es muy muy muy sencillo pero no lo veo claro y necesito una ayudita.

En definitiva: Necesito que los animation se ejecuten solo cuando el usuario las tenga en frente.

Thanks. Un saludo.