CSS animation-play-state Property

It is a shortcut for indicating animation properties in order to write faster code.

Syntax

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

Example

<!DOCTYPE html>
<html>
<head>
<style>
.box {
    position: relative;
    width: 80px;
    height: 80px;
    background: #00ab55;
    animation: moveit 6s;
    animation-play-state: paused;
}

@keyframes moveit {
    from {
        left: 0;
    }
    to {
        left: 250px;
    }
}
</style>
</head>
<body>

<div class="box"></div>

</body>
</html>

Preview

Property Values

Value	Description
normal	This specifies that the animation has been halted.
reverse	The default value. Specifies whether or not the animation is active.
initial	Set this property's value to the default.
inherit	This attribute is inherited from its parent element.

Supported Browsers

Element	Chrome	Firefox	Safari	Edge / IE	Opera
animation-play-state	43.0 4.0 -webkit-	16.0 5.0 -moz-	9.0 4.0 -webkit-	10.0	30.0 15.0 -webkit- 12.0 -o-

animation-name

animation-timing-function

CSS animation-play-state Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us