Run js script after css animation is finished

Question

I`m using this code to create an animation of moving text i ASP.NET Core project http://www.html.am/html-codes/marquees/css-scrolling-text.cfm How do I execute js sctipt after animation is finished? Something like that, I want to refresh page after animation is finished

    <script>
       function myFunction() {
           location.reload();
       }
    </script>

Answer 1

All you really need to do is create a Javascript event listener:

The example below creates an event listener for the circle object. You can run the example to see it live.

Also, all of the CSS / circle stuff is just for the animation, all you really need to look at is the javascript portion.

 var circle = document.getElementsByTagName("circle")[0]; var change = document.getElementById("change"); circle.addEventListener("animationend", function() { change.innerHTML = "The animation has ended!"; }); 

 circle { border-radius: 50%; width: 100px; height: 100px; background-color: rgba(0,0,255,0.9); border: 2px solid black; position: absolute; animation: bounce 1.5s; animation-direction: alternate; animation-timing-function: cubic-bezier(.5,0.05,1,.5); animation-fill-mode: forwards; } @keyframes bounce { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 200px, 0); } } 

 <p id='change'> This text will change when the animation has ended. </p> <circle></circle>