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

[Peter Carr]

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 */ @keyframes ease-outAnimation { 0% { left: 0; top: -100vh; } 100% { left: 0; top: 100vh; } }

[B i r n o u]

does this help

https://css-tricks.com/restart-css-animation/

[Peter Carr · Accepted solution]

Thanks. For some reason there options never worked.

I eventually got it to work with the following:

    $target = $('#block');

    $target.removeClass('easeoutAnimObj');

    setTimeout("$target.addClass('easeoutAnimObj');",100)

});