Home >Web Front-end >CSS Tutorial >How to use animation-play-state property
How to use animation-play-state property
- 青灯夜游Original
- 2019-02-01 11:12:114489browse
The animation-play-state attribute is used to specify whether the animation is running or paused; it can be used with JavaScript to achieve the effect of pausing the animation during playback.
CSS3 animation-play-state property
Function:animation- The play-state attribute 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 attribute in JavaScript to pause the animation during playback.
Note: Internet Explorer 9 and earlier versions do not support the animation-play-state attribute.
CSS3 animation-play-state attribute usage example
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s;
animation-play-state:running;
/* Safari and Chrome */
-webkit-animation:mymove 5s;
-webkit-animation-play-state:running;
}
div:hover{
animation-play-state:paused;
-webkit-animation-play-state:paused;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>Rendering:
The above is the entire content of this article, I hope it will be helpful to everyone's study. For more exciting content, you can pay attention to the relevant tutorial columns of the PHP Chinese website! ! !
The above is the detailed content of How to use animation-play-state property. For more information, please follow other related articles on the PHP Chinese website!