Dofactory.com
Dofactory.com
Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

CSS animation-play-state

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


Last updated on Sep 30, 2023

Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides