< css‎ | properties
Jump to: navigation, search


This article is Ready to Use.

W3C Editor's Draft


Defines whether an animation is running or paused.

Overview table

Initial value running
Applies to All elements, ::before and ::after pseudo-elements.
Inherited No
Media visual
Computed value As specified.
Animatable No
CSS Object Model Property
Percentages N/A


  • animation-play-state: paused
  • animation-play-state: running


Plays the animation. If restarting a paused animation, the animation resumes from the current (paused) state.

Pauses the animation. A paused animation continues to display the current state of the animation.


The CSS uses the animation property and the @keyframes property as well as the animation-play-state property and more.

The example show how to create a counter like function. By using the ":checked" selector for radio buttons we toggle the animation states for the counter


/* position the handles */
#stopwatch_handles {
	margin-top: 0px;
/* Style the labels itself, at the bottom we hide the radio buttons itself */
#stopwatch_handles label {
	cursor: pointer;
	padding: 5px 5px;
	font-family: Verdana, sans-serif;
	font-size: 12px;
input[name="handles"] {display: none;}

/*Actual handles  this triggers the stopwatch to start and stop based on the state of the radio buttons */
#stopbtn:checked~.stopwatch .numbers {
	animation-play-state: paused
#startbtn:checked~.stopwatch .numbers {
	animation-play-state: running

/* we set the animation in 10 steps of 1 second, and set the play state to paused by default */
.moveten {
	animation: moveten 1s steps(10, end) infinite;
	animation-play-state: paused;
/* here we do the same except for six */
.movesix {
	animation: movesix 1s steps(6, end) infinite;
	animation-play-state: paused;

/* here we actualy set the duration of the seconds so that they sync up when needed */
.second {
	animation-duration: 10s;
.tensecond {
	animation-duration: 60s;

/* and here are the keyframes so that the numbers animate vertically
The height is 30 and the there are 10 digits so to move up we use -300px (30x10) */
@keyframes moveten {
	0% {top: 0;}
	100% {top: -300px;} 

/* The same goes for this one but instead of ten we have 6 so we get 30x6 = 180px */
@keyframes movesix {
	0% {top: 0;}
	100% {top: -180px;} 

A mobile-like interface featuring a keyframe-animated pulsing icon. When the application enters an interruption mode, the icon is paused and the page presents another panel to indicate that the animation is inactive.


div.selected {
    animation: pulse 0.5s infinite alternate running;

body.interrupt div.selected {
    animation-play-state: paused;

@keyframes pulse {
    from {
        transform : scale(1) translateX(0);
        opacity : 1;
    to {
        transform : scale(0.75) translateX(0);
        opacity : 0.25;

View live example


 Can also be a comma-separated list of play states, e.g., running, paused, running, where each play state is applied to the corresponding ordinal position value of the animation-name property.

Related specifications

Specification Status Related Changes
CSS Animation W3C Working Draft

See also

Other articles


This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: Windows Internet Explorer API reference Article