How to use the animation-play-state attribute in css
This article is about how to use the animation-play-state attribute in css. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.
CSS3animation-play-state attribute
Function: 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.
Description: you can use this property in JavaScript so that you can pause the animation during playback.
Note: the animation-play-state attribute is not supported in InternetExplorer9 and earlier versions.
An example of using the CSS3animation-play-state attribute
Div
{
Width:100px
Height:100px
Background:red
Position:relative
Animation:mymove5s
Animation-play-state:running
/ * SafariandChrome*/
-webkit-animation:mymove5s
-webkit-animation-play-state:running
}
Div:hover {
Animation-play-state:paused
-webkit-animation-play-state:paused
}
@ keyframesmymove
{
From {left:0px;}
To {left:200px;}
}
@-webkit-keyframesmymove/*SafariandChrome*/
{
From {left:0px;}
To {left:200px;}
}
Thank you for reading! This is the end of this article on "how to use the animation-play-state attribute in css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!
