Breaking News: Grepper is joining You.com. Read the official announcement!

css stop animation in middle

emcee answered on January 21, 2023 Popularity 2/10 Helpfulness 1/10

answer css stop animation in middle

css stop animation in middle

Comment

// 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);

Popularity 2/10 Helpfulness 1/10 Language css

Source: Grepper

Tags: animation css

Link to this answer
Share Copy Link

Contributed on Jan 21 2023

emcee

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

css stop animation in middle

Contents

More Related Answers

css stop animation in middle

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.