CSS animation-direction Property

Specifies whether the animation should be played backwards on alternate cycles.

Syntax

animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;

Example

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

@keyframes moveit {
    0%   {background: #ff4842; left: 0; top: 0;}
    25%  {background: #ffc107; left: 250px; top: 0;}
    50%  {background: #1890FF; left: 250px; top: 250px;}
    75%  {background: #00ab55; left: 0; top: 250px;}
    100% {background: #ff4842; left: 0; top: 0;}
}
</style>
</head>
<body>

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

</body>
</html>

Preview

Property Values

Value	Description
normal	The animation is played backwards. This is the default setting.
reverse	The animation is performed in the opposite direction, i.e. backward.
alternate	The animation is performed backwards first, then forwards.
alternate-reverse	The animation is played backwards first, then forwards.
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-direction	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

animation-duration

CSS animation-direction Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us