This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.



Defines whether an animation is running or paused.

Overview table

Initial value
Applies to
All elements, ::before and ::after pseudo-elements.
Computed value
As specified.

CSS Object Model Property



  • 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

CSS Animation
W3C Working Draft

See also

Other articles