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>
TL;DR # Use CSS animations for simpler "one-shot" transitions, like toggling UI element states. Use JavaScript animations when you want to have advanced effects like bouncing, stop, pause, rewind, or slow down.
CSS allows animation of HTML elements without using JavaScript or Flash! In this chapter you will learn about the following properties: @keyframes.
CSS animations make it possible to do simple animations without JavaScript at all. JavaScript can be used to control CSS animations and make them even better, with little code.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With