#animation-direction

#Introduction

animation-direction property specifies whether the animation should play in reverse.

#Examples

css-apisrc/animation-direction/App.tsx

Preview

#Syntax

animation-direction: normal
animation-direction: reverse
animation-direction: alternate
animation-direction: alternate-reverse
animation-direction: normal, reverse
animation-direction: alternate, reverse, normal

#Values

#normal

The animation plays forward in each cycle. In other words, each animation cycle ends and resets to the starting point to begin again. This is the default behavior.

#alternate

The animation alternates between running forwards and backwards. When running backwards, the animation steps backward and timing functions are also reversed. For example, ease-in becomes ease-out when reversed.

#reverse

The animation runs backwards, playing from end to start.

#alternate-reverse

The animation runs backwards on the first iteration, then forwards on the next, and continues alternating.

#Formal definition

#Formal syntax

/*default value: normal*/
animation-direction: normal | reverse | alternate | alternate-reverse;

#See also

• animation
• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state
• CSS animation event
• Animated API

#Compatibility