animation-play-state - HTML CSS CSS Property

HTML CSS examples for CSS Property:animation-play-state

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. animation-play-state

Description

The animation-play-state CSS property specifies whether an animation is playing or paused.

The following table summarizes the animation-play-state Property.

Item Value
Default value: running
Applies to:All elements, ::before and ::after pseudo-elements
Inherited: No
Animatable: No.

Syntax

The syntax of the property is as follows: 

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

Property Values

The following table describes the values of this property.

Value Description
paused Set the animation to pause.
running Set the animation to running state. This is default value.
initial Sets this property to its default value.
inherit take the value of its parent element animation-play-state property.

The example below shows the animation-play-state property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 animation-play-state Property</title>
  <style type="text/css">
.box {<!--from  www . jav a 2 s.  c o  m-->
    width: 153px;
    height: 103px;
  margin: 50px;
    background: url("https://www.java2s.com/style/demo/Opera.png") no-repeat;
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: moveit;
    -webkit-animation-duration: 2s;
    -webkit-animation-play-state: paused;
    /* Standard syntax */
    animation-name: moveit;
    animation-duration: 2s;
    animation-play-state: paused;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}

/* Standard syntax */
@keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}
</style>
 </head>
 <body>
  <div class="box"></div>
 </body>
</html>

Related Tutorials