Применение css анимации при нажатии на ссылку

[opalsmoke]

Есть вот такой замечательный пример мини-слайдера на чистом css

<div id="slider">
    <div>
        <img src="01.png" alt="">
        <h1>Умная девушка!</h1>
        <p>Quidditas tuo quid facilisis ex sic ut casus turbata minim venisse in fuerat accidens quam dicentes Is hendrerit ad nomine. Sibi ambulare manu impetum ideo omnibus caecus eum in lucem exempli paupers. Stranguillio ut libertatem deum rogus aegritudinis causet subsannio. per dicis eo dicimus quis nudus iuvenem. Stranguillionis vero rex in modo invenit Boreas quam aniculae morsque nutricem. Iterum non solutionem innocentem vis apud senex lacrimis non coepit. Iriure dolore suas sua confusus eos est cum unde meae sit audivit emere sibi dicit pietate.</p>
    </div><div>
        <img src="02.png" alt="">
        <h1>Деловая девушка!</h1>
        <p>Innocentis sit aliquip ipsa quod una civitatis in fuerat accidens suos alloquitur vidit pater. Thebaeorum in deinde plectrum anni ipsa codicellos numquam, scelerata nunc intuens clita materiae in modo cavendum es. Virginis instaret dolores ambulavit sapiens suam, thebaeorum in deinde plectrum anni ipsa codicellos. Dicere Tharsia adulescens tuorum ipsa hospes ibi effudit Lorem post discipulae venit est in. Iubeo non coepit cognitionis huius dulcis a. Apollinem existimas filiam in lucem in rei completo litus ostendam Apollonio omnino doming.</p>
    </div>
</div>
<a href="">Показать еще</a>

Стиль css:

#slider {
    height: 300px;
    overflow: hidden;
    width: 960px;
    margin: 0 auto;
}
#slider div {
    position: relative;
    height: 300px;
}

#slider div {
    animation: mymove 10s linear infinite;
    -moz-animation: mymove 10s linear infinite; /* Firefox */
    -webkit-animation: mymove 10s linear infinite; /* Safari and Chrome */
}

@keyframes mymove {
    0% {top: 0px;}
    20% {top: 0px;}
    25% {top: -300px;}
    75% {top: -300px;}
    80% {top: 0px;}
    100% {top: 0px;}
}
/* Firefox */
@-moz-keyframes mymove {
    0% {top: 0px;}
    20% {top: 0px;}
    25% {top: -300px;}
    75% {top: -300px;}
    80% {top: 0px;}
    100% {top: 0px;}
}
/*Safari and Chrome*/
@-webkit-keyframes mymove {
    0% {top: 0px;}
    20% {top: 0px;}
    25% {top: -300px;}
    75% {top: -300px;}
    80% {top: 0px;}
    100% {top: 0px;}
}

Все работает отлично! Но нужно еще сделать чтоб при нажатии на кнопку "показать еще" анимация проигрывалась и содержимое блока менялось. Как это можно сделать?