CSS animation-play-state Property
Example
Pause an animation:
div {
animation-play-state: paused;
}
animation-play-state: paused;
}
Definition and Usage
The animation-play-state
property specifies whether the animation is running or paused.
Note: Use this property in a JavaScript to pause an animation in the middle of a cycle.
Default value: | running |
---|---|
Inherited: | no |
Animatable: | no. |
Version: | CSS3 |
JavaScript syntax: | object.style.animationPlayState="paused" |
- Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
- object - object in javascript means the element on which
animation-play-state
is applied. - Animatable - "Animatable = no" means that it cannot be animated with CSS
@keyframes
.
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.
Property | |||||
---|---|---|---|---|---|
animation-play-state | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
CSS Syntax
animation-play-state: paused|running|initial|inherit;
Property Values
Value | Description | Demo |
---|---|---|
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. |
More Examples
Example
Pause an animation on hover:
div:hover {
animation-play-state: paused;
}
animation-play-state: paused;
}
Comments
Post a Comment