CSS animation-direction Property

Description

The animation-direction property defines whether or not the animation should play in reverse on some or all cycles. When an animation is played in reverse the timing functions are also reversed. For example, when played in reverse an ease-in animation would appear to be an ease-out animation.

Initial value
normal
Applies to
All elements, :before and :after pseudo elements
Inherited
No
Media
Visual
Computed value
As specified
Animatable
No
CSS Version
CSS3
JavaScript syntax
object.style.animationDirection

Syntax

animation-direction: <single-animation-direction> [ ',' <single-animation-direction> ]*

Values

<single-animation-direction> = normal | reverse | alternate | alternate-reverse
  • normalAll iterations of the animation are played as specified.
  • reverseAll iterations of the animation are played in the reverse direction from the way they were specified.
  • alternateThe animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.
  • alternate-reverseThe animation cycle iterations that are odd counts are played in the reverse direction, and the animation cycle iterations that are even counts are played in a normal direction.

Example

<div class="box normal">normal</div> 
<div class="box alternate">alternate</div>
<div class="box reverse">reverse</div>
<div class="box alternate-reverse">alternate-reverse</div>
.box { 
   background: #fc0; 
   width: 100px; 
   padding: 20px 0; 
   text-align: center; 
   position: absolute; 
   animation: move 5s infinite; 
} 
.normal { 
   animation-direction: normal; 
   background-color: #e4efc7; 
} 
.alternate { 
   top: 100px; 
   animation-direction: alternate; 
   background-color: #fee7dc; 
} 
.reverse { 
   top: 200px; 
   animation-direction: reverse; 
   background-color: #c8eaf5; 
} 
.alternate-reverse { 
   top: 300px; 
   animation-direction: alternate-reverse; 
   background-color: #ffead0; 
} 
@keyframes move { 
   from { 
      left: 0; 
   } 
   to { 
      left: 100%; transform: translateX(-100px); 
   } 
} 

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
10124316309
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
4343163094.0

Last updated by CSSPortal on: 17th October 2019