How to stop css3 animation

In CSS, you can use the animation-play-state attribute to control the pause of animation, with the syntax "animation-play-state:paused"; the compatibility of this attribute in different browsers is different, and the corresponding prefix needs to be added (such as "-ms-", "-webkit-", etc.).

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

Animation is the effect of gradually changing an element from one style to another. You can change as many styles as you want as many times as you like. Please specify the time when the change occurs as a percentage, or use the keywords "from" and "to", which are equivalent to 0% and 100%.

CSS3 animation directly provides an animation-play-state style to control the pause processing of animation. Add a control pause style. When writing the animation style, pay special attention to the compatibility of different browsers and add the corresponding prefix.

Example:

      
  
注意: animation-play-state属性不兼容 Internet Explorer 9以及更早版本的浏览器.
 
  

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

Note: Use this property in JavaScript to pause the animation during a cycle.

animation-play-state: paused|running;

• paused: Specify the pause animation

• running: Specify the running animation

Recommended Learn:css video tutorial

The above is the detailed content of How to stop css3 animation. For more information, please follow other related articles on the PHP Chinese website!