animation-play-state

This page has been flagged with the following issues:

High-level issues:

Content:

Summary

Controls whether an animation is running or paused

Overview table

Initial value	`running`
Applies to	all elements
Inherited	No
Media	visual
Computed value	as specified
Animatable	No
CSS Object Model Property

Syntax

animation-play-state: single-animation-play-state

Values

single-animation-play-state: running (default) or paused

running: Plays the animation. If restarting a paused animation, the animation resumes from the current (paused) property value.
paused: Pauses the animation. The object is displayed with the current property value until animation-play-state is set to running and the animation resumes.

Examples

The CSS uses the Animation property and the @keyframes property as well as the animation-play-state propery 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;-webkit-animation-play-state: paused;-moz-animation-play-state: paused;-o-animation-play-state: paused;}
#startbtn:checked~.stopwatch .numbers {animation-play-state: running;-webkit-animation-play-state: running;-moz-animation-play-state: running;-o-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;
	-webkit-animation: moveten 1s steps(10, end) infinite;
	-moz-animation: moveten 1s steps(10, end) infinite;
	-o-animation: moveten 1s steps(10, end) infinite;
	animation-play-state: paused;
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	-o-animation-play-state: paused;
}
/* here we do the same except for six */
.movesix {
	animation: movesix 1s steps(6, end) infinite;
	-webkit-animation: movesix 1s steps(6, end) infinite;
	-moz-animation: movesix 1s steps(6, end) infinite;
	-o-animation: movesix 1s steps(6, end) infinite;
	animation-play-state: paused;
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	-o-animation-play-state: paused;
}

/* here we actualy set the duration of the seconds so that they sync up when needed */
.second {animation-duration: 10s;-webkit-animation-duration: 10s;-moz-animation-duration: 10s;-o-animation-duration: 10s;}
.tensecond {animation-duration: 60s;-webkit-animation-duration: 60s;-moz-animation-duration: 60s;-o-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;} 
}
@-webkit-keyframes moveten {
	0% {top: 0;}
	100% {top: -300px;} 
}
@-moz-keyframes moveten {
	0% {top: 0;}
	100% {top: -300px;} 
}
@-o-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;} 
}
@-webkit-keyframes movesix {
	0% {top: 0;}
	100% {top: -180px;} 
}
@-moz-keyframes movesix {
	0% {top: 0;}
	100% {top: -180px;} 
}
@-o-keyframes movesix {
	0% {top: 0;}
	100% {top: -180px;} 
}

Usage

When set to paused, the animation is frozen in its current state. Changing the value back to running resumes the animation from the point at which it was paused.

In common with other animation properties, multiple values separated by commas are applied to animations in the same order as they are listed in animation-name. Excess values are ignored. If there are fewer values than animations, the browser the browser cycles through them again until each animation has been assigned a play state.

Syntax

animation-play-state: running | paused [ , running | paused ] *

Standards information

CSS Animations Module Level 3, Section 3.7

Compatibility

Desktop

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic Support	4.0 -webkit	16.0 5.0 -moz	10.0	12.1 12.0 -o	3.1 -webkit

Mobile

Feature	Android	BlackBerry	Chrome for mobile	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Opera Mini	Safari Mobile
Basic Support	2.1 -webkit	7.0 -webkit	18.0 -webkit	16.0 15.0 -moz	WP 8 (IE 10)	12.1	Unsupported	3.2 -webkit

Compatibility notes

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

CSSStyleDeclaration
currentStyle
style
a
abbr
acronym
b
bdo
big
br
cite
code
dfn
em
i
img
input
kbd
label
q
samp
select
small
span
strong
sub
sup
textArea
tt
var
address
blockQuote
div
dl
fieldSet
form
noFrames
noScript
ol
p
pre
table
ul
dd
dt
li
tBody
td
tFoot
th
tHead
tr
button
del
ins
map
object
script

This article contains content originally from external sources.

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

Search

animation-play-state

How to Use

animation-play-state

Summary

Overview table

Syntax

Values

Examples

Usage

Syntax

Standards information

Compatibility

Desktop

Mobile

Compatibility notes

See also

Related articles

Animation

Related pages (MSDN)