xxxxxxxxxx
// Use the animation-play-state property to pause or stop an animation
.animated-element {
animation: my-animation 4s linear;
animation-play-state: paused; /* Pause the animation */
}
/*
The animation-play-state property is set to paused,
which will pause the animation when it is applied to the element.
To stop the animation in the middle and keep the last state,
you can use JavaScript or jQuery to remove the animation class
after a certain amount of time.
*/
setTimeout(function(){
document.querySelector('.animated-element').classList.remove("my-animation");
}, 2000);