How to stop CSS animation midway and maintain the posture

Preface

I once encountered a difficult problem. I needed to make a swinging house fall from a tower crane, but during the falling process, the house needed to maintain the swinging angle at the moment of falling. It was very difficult for me at that time. At first, I hoped to get the current swinging angle of the house and assign it to the house's transform:rotate() at the moment of falling, but this was too troublesome and would not be the optimal solution.

But in fact, only one attribute can solve this problem.

animation-play-state

1. CSS only

Use this property to pause an animation in its motion cycle, and start directly from the current frame the next time it starts. This is an animation property, which works on the animation property. You can use it in CSS or in JS, and it is equally convenient, at least... it is better than getting the angle and assigning it.

.xxx {
  animation-play-state: paused;  
  //Once this property is added, the CSS animation will be paused immediately and remain at the current frame}

.xxx {
  animation-play-state: running; 
  //Once this property is added, the CSS animation will start working immediately from the current frame;
}

You can add an animation to a page element and set it to appear when it is in the hover state.

 animation-play-state:paused

The animation will stop when your mouse moves over the element.

2. Use JS only

//When i is equal to 1, the media plays and the notes float. When i is equal to 0, the media pauses and the notes pause.
            if (i == 1) {
                right.style.animationPlayState = "paused"
                audio.pause();
                i = 0;
            } else {
                right.style.animationPlayState = "running";
                audio.play();
                i = 1;
            } 

This is the end of this article about how to stop and maintain CSS animation. For more information about stopping CSS animation, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!