CSS animation-play-state Property
Defines whether or not the animation is currently playing.
This could be manipulated with JavaScript to pause and resume an animation,
for example,
Accepted values are running and paused.
When the animation is changed from running to paused, and later changed back to running, the animation will continue from where it left off – it won’t start over from the beginning.
Syntax -
|
animation-play-state: paused|running|initial|inherit;
|
Now we will take a look at the different values -
1. paused
Specifies that the animation is paused
2. runnin
Specifies that the animation is running, and this is the default value.
Now we will see an Example -
Example -
Now we will see the previous example with the value - paused -
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Animations - animation-name</title>
<style type="text/css">
@-webkit-keyframes move {
from {
top: 0;
left: 0;
opacity: 1;
}
50% {
top: 0;
left: 500px;
opacity: .5;
}
to {
top: 500px;
left: 500px;
opacity: .1;
}
}
@-webkit-keyframes resize {
from {
height: 300px;
width: 100px;
}
50% {
height: 100px;
width: 100px;
}
to {
height: 100px;
width: 300px;
}
}
@-webkit-keyframes fade {
from {
opacity: 1;
}
50% {
opacity: .5;
}
to {
opacity: .1;
}
}
#anim1 {
/* animation value paused */
animation-play-state:paused;
-webkit-animation-name: move, resize, fade;
-webkit-animation-duration: 10s;
position: absolute;
background-color: purple;
}
</style>
</head>
<body>
<div id="anim1">Watch me move and vanish!</div>
</body>
</html>
|
Output -
