How do you repeat a css animation on click with javascript ?

I have a scroll down button, which when I click, the page needs to scroll down and a secondary div(block) moves from the top to bottom.

It works once, but if you scroll back up to the top of the page and click again, the div(block) doesn't animate again.

Also, I would prefer if both these actions could happen at the same time.

Can someone please help me with the javascript ?

HTML

<main>

<div id="block"></div>

<header id="header">

<a href="#" class="scroll-down" address="true" onclick="ani()"></a>

     <script type="text/javascript">

     function ani(){

     document.getElementById('block').className ='easeoutAnimObj';

     }

     $(function ani() {

     $('.scroll-down').click (function() {

     $('html, body').animate({scrollTop: $('section').offset().top - 70}, 'slow');

     return false;

     });

     });

     </script>

</header>

<section>

     <div class="row"></div>

</section>

</main>

CSS

#block {

     position: absolute;

     top: -100vh;

     width: 100%;

     height: 100vh;

     background-color: #FF0004;

     z-index: 100;

     visibility: visible;

}

.easeoutAnimObj {

     position: relative;

     /* Chrome, Safari*/

     -webkit-animation-name: ease-outAnimation;

     -webkit-animation-duration: 2s;

     -webkit-animation-timing-function: ease;

     -webkit-animation-delay: 0s;

     -webkit-animation-iteration-count: 1;

     -webkit-animation-direction: down;

     -webkit-animation-play-state: running;

     /* Mozilla */

     -moz-animation-name: ease-outAnimation;

     -moz-animation-duration: 2s;

     -moz-animation-timing-function: ease;

     -moz-animation-delay: 0s;

     -moz-animation-iteration-count: 1;

     -moz-animation-direction: down;

     -moz-animation-play-state: running;

     /* Standard syntax */

     animation-name: ease-outAnimation;

     animation-duration: 2s;

     animation-timing-function: ease;

     animation-delay: 0s;

     animation-iteration-count: 1;

     animation-direction: down;

     animation-play-state: running;

}

/* Define the keyframe and changes */

/* Chrome, Safari */ @-webkit-keyframes ease-outAnimation { 0% { left: 0; top: -100vh; } 100% { left: 0; top: 100vh; } }

/* Firefox */ @-moz-keyframes ease-outAnimation { 0% { left: 0; top: -100vh; } 100% { left: 0; top: 100vh; } }

/* Standard syntax */ @14668356 ease-outAnimation { 0% { left: 0; top: -100vh; } 100% { left: 0; top: 100vh; } }