The animation-play-state property is used to specify whether the animation is running or paused.
Syntax:
animation-play-state: paused|running|initial|inherit;
Property Value: The animation-play-state property are listed below:
- paused: This property is used to specify that the animation is paused.
- running: It is the default value. This property is used to specify that the animation is running.
- initial: This property is used to set its default value.
- inherit: It is used to inherit the animation property from its parent.
Example: In this example, we are using the above-explained property.
html
<!DOCTYPE html><html>
<head>
<title>
CSS | animation-play-state Property
</title>
<style>
body {
text-align: center;
width: 70%;
}
h1 {
color: green;
}
.gfg {
width: 50px;
height: 50px;
background: green;
position: relative;
-webkit-animation: mymove 10s;
-webkit-animation-play-state: play;
animation: mymove 5s;
animation-play-state: play;
}
.geeks {
width: 50px;
height: 50px;
background: green;
position: relative;
-webkit-animation: mymove 10s;
-webkit-animation-play-state: paused;
animation: mymove 5s;
animation-play-state: paused;
}
@-webkit-keyframes mymove {
from {
left: 0%;
}
to {
left: 80%;
}
}
@keyframes mymove {
from {
left: 0%;
}
to {
left: 80%;
}
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>animation-play-state property</h2>
<div class="gfg"></div><br>
<div class="geeks"></div>
</body>
</html>
|
Output:
Supported Browser: The browser supported by animation-play-state property are listed below:
- Google Chrome 43.0 and above
- Edge 12.0 and above
- Firefox 16.0 and above
- Opera 30.0 and above
- Safari 9.0 and above