CSS animation-play-state Property

The animation-play-state sets the animation play state.

Possible values include paused and running.

The default is running.

Example

#

An element with animation-play-state set to running.

<style> 
  .animate {
    width: 80px;
    height: 80px;
    background: steelblue;
  
    animation: movingAnimation 2s alternate;
    animation-iteration-count: infinite;
    animation-play-state: running;
  }
  
  @keyframes movingAnimation {
    from { transform: none; }
    to { transform: translateX(350%); }
  }
</style>

<div class="animate"></div>

Syntax

animation-play-state: paused | running | 
                      initial | inherit;

Values

#

Value Description
paused Pause the animation at start
running Default. Plays the animation at start
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different animation-play-state values.

<style> 
  .animate-example {
    width: 80px;
    height: 80px;
    background: steelblue;
  
    animation: movingAnimation 2s;
    animation-iteration-count: infinite;
    animation-play-state: paused;
  }
  
  @keyframes movingAnimation {
    from { transform: none; }
    to { transform: translateX(350%); }
  }
</style>

<div class="animate-example"></div>

Browser support

This table shows when animation-play-state support started for each browser.

Chrome
43.0 May 2015
Firefox
16.0 Oct 2012
IE/Edge
10.0 Sep 2012
Opera
30.0 Jun 2015
Safari
9.0 Sep 2015

You may also like

Guides