animation-play-state

Jump to: navigation, search

animation-play-state


W3C Editor's Draft

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

Syntax

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


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

CSS

/* 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;} 
}

View live exampleA 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.

CSS

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;
    }
}

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

Specification Status Related Changes
CSS Animation W3C Working Draft

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? ? ? ? ?

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?


Compatibility notes

Browser Version Note
Internet Explorer 10.0 The -ms- prefix property is deprecated and should not be used.

See also

Other articles

Attribution

This article contains content originally from external sources.

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