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.

animation-play-state

Summary

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

Syntax

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

Values

running
Plays the animation. If restarting a paused animation, the animation resumes from the current (paused) state.
paused
Pauses the animation. A paused animation continues to display the current state of the animation.

Examples

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

Usage

 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

Attributions