CSS3 animation-play-state Property

Here is a brief description of how to specify the play state of an animation in CSS3 that is whether the animation is in running state or in paused state using the CSS3 animation-play-state property.

Explanation

Property :

animation-play-state: paused|running|initial|inherit;


Where,
paused - Specifies that the animation is paused.
running - Default value. Specifies that the animation is running.
initial - Sets this property to its default value.
inherit - Inherits this property from its parent element.

Usage:


animation-play-state: paused;
animation-play-state: running;

Definition:

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

It takes the following values.
  • running:Default.Specifies that the animation is running.
  • paused : Specifies that the animation is paused

Example :
<style>
.demodiv {
width: 50px;
height: 50px;
background: red;
position: relative;
-webkit-animation: mymove 5s; /* Chrome, Safari, Opera */
-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
animation: mymove 5s;
animation-play-state: paused;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
@keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
</style>
<div class='demodiv'></div>

Result:



Ask Questions

Ask Question