This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

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