Property Description

The animation-direction property specifies whether or not the animation should play in reverse on alternate cycles.

If the animation-direction value is "alternate", the animation will be played as normal every odd time (1,3,5,etc..) and backwards every even time (2,4,6,etc...).

Note: If the animation is set to play only once, this property will have no effect.

This property has the following syntax:

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

Property Values

Examples

This example shows two animations with different directions:

<style type="text/css">

div.testnormal
{
  width:50px;
  height:50px;
  background:blue;
  position:relative;
  animation:boxmove 5s infinite;
  animation-direction:normal;
  /* Firefox */
  -moz-animation:boxmove 5s infinite;
  -moz-animation-direction:normal;
  /* Safari and Google Chrome */
  -webkit-animation:boxmove 5s infinite;
  -webkit-animation-direction:normal;
}

div.testalternate
{
  width:50px;
  height:50px;
  background:green;
  position:relative;
  animation:boxmove 5s infinite;
  animation-direction:alternate;
  /* Firefox */
  -moz-animation:boxmove 5s infinite;
  -moz-animation-direction:alternate;
  /* Safari and Google Chrome */
  -webkit-animation:boxmove 5s infinite;
  -webkit-animation-direction:alternate;
}

@keyframes boxmove
{
  from {left:0px;}
  to {left:210px;}
}

@-moz-keyframes boxmove /* Firefox */
{
  from {left:0px;}
  to {left:210px;}
}

@-webkit-keyframes boxmove /* Safari and Google Chrome */
{
  from {left:0px;}
  to {left:210px;}
}

</style>
<div class="testnormal"></div>
<br/>
<div class="testalternate"></div>
</div>

This produces the following result:

Browser Support

Miscellaneous Information