Animation text fade-in other text

Question

I was trying to make an animation with this HTML:

<div class="client-quote home">
<p>
<a href="/klanten.html">
“Flexibel, meedenken, snel schakelen, creatief, kwaliteit … zo ervaar ik NPN. Een fijne partner, die kennis van zaken en de branche heeft.”
</a>
</p>
<p>
</p>
<p class="center-text">
<a href="/klanten.html">
<em>
Cindy Bastiaansen, Commercieel Medewerker, Healthypharm BV &amp; Neocare BV
</em>
</a>
</p>
<p>
</p>
</div>

I want to change both of the text with fade-in and fade-out.

How could I do this? Using :after and :before with transitions?

Using the jQuery on comments:

jQuery(document).ready(function() {
function doFade() {
    jQuery(".client-quote").fadeIn(1000,function() {
        jQuery(".client-quote").delay(18000).fadeOut(1000);
        setTimeout(fadeTwo,19000);
    });
}

function fadeTwo() {
    jQuery(".client-quote2").fadeIn(1000,function() {
        jQuery(".client-quote2").delay(18000).fadeOut(1000);
        setTimeout(fadeThree,19000);
    });
}

function fadeThree() {
    jQuery(".client-quote3").fadeIn(1000,function() {
        jQuery(".client-quote3").delay(18000).fadeOut(1000);
        setTimeout(doFade,19000);
    });
}
doFade();

});

Now is correct. Just the time, i dont understand how it goes. If i want to let all the text to stay 20 seconds, i have to give the fadein and fadeout to 20000 ? And if i want that the transaction spend just 1 second to do completly between one and two?

EDIT: Changed correctly. Now, it need 1 second to show the first, then, wait 18 seconds doing nothing, and in another second, it hide, and appear the second.

Animation duration: 60 second.

Answer 1

The animation was done with jQuery:

Used the properties: setTimeOut fadeOut fadeIn

animation.js:

jQuery(document).ready(function() {
    function doFade() {
        jQuery(".client-quote").fadeIn(1000,function() {
            jQuery(".client-quote").delay(18000).fadeOut(1000);
            setTimeout(fadeTwo,19000);
        });
    }

    function fadeTwo() {
        jQuery(".client-quote2").fadeIn(1000,function() {
            jQuery(".client-quote2").delay(18000).fadeOut(1000);
            setTimeout(fadeThree,19000);
        });
    }

    function fadeThree() {
        jQuery(".client-quote3").fadeIn(1000,function() {
            jQuery(".client-quote3").delay(18000).fadeOut(1000);
            setTimeout(doFade,19000);
        });
    }
    doFade();
});

Animation duration: 60 seconds.