Shulou(Shulou.com)06/02 Report--

This article will introduce in detail for you "css3 how to make animation animation stop", the content steps are clear and detailed, the details are handled properly, and the editor will update different knowledge points every day, I hope this article "css3 how to make animation animation stop" can give you unexpected harvest, please follow the editor's ideas slowly in depth, the specific content is as follows, to harvest new knowledge.

In css3, you can use the animation-play-state attribute to stop the running animation animation, which is used to specify whether the animation is running or paused, simply by adding a "animation-play-state:paused;" style to the element to which the animation is applied.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

In css3, you can use the animation-play-state property to stop the running animation animation.

For example, there is a constantly rotating animation:

Div {width: 100px; height: 100px; background-color: red; margin: 50px auto; animation: mymove 1s linear infinite } @ keyframes mymove {100% {transform: rotate (360deg) } @-webkit-keyframes mymove {/ * Safari and Chrome * / 100% {transform: rotate (360deg) }}

If you want the div element to stop rotating, you can set the animation-play-state attribute to the div element

Div {width: 100px; height: 100px; background-color: red; margin: 50px auto; animation: mymove 1s linear infinite; animation-play-state:paused;}

Description:

The animation-play-state property specifies whether the animation is running or paused.

Syntax:

Animation-play-state: paused | running

Paused: specifies that the animation has been paused.

Running: specifies that the animation is playing.

This attribute can be used with JavaScript to pause the animation during playback.

What are the selectors of css? css selectors can be divided into three categories, namely, id selector, class selector and tag selector. There can be many combinations between them, such as descendant selector, sub-selector, pseudo-class selector, general selector, group selector, and so on.

Thank you for reading here. The editor hopes that you have the most profound experience from the practical level on the key issue of "how to stop animation animation with css3". The specific use also requires everyone to practice and use it in order to understand it. If you want to read more related articles, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.