animation-play-state

< css‎ | properties
Jump to: navigation, search

animation-play-state

This article is Almost Ready.


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
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.


Compatibility

Do you think this data can be improved? You can ask to add by opening an issue or make a pull request.

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
?
prefix
?
Unknown
10
Yes
12
prefix
12.10
Yes
?
prefix

Mobile

FeaturesAndroidFirefox MobileIE PhoneOpera MobileSafari Mobile
Basic support
?
prefix
5.0
prefix
16.0
Yes
?
Unknown
?
Unknown
?
Unknown


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

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