Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/jamiebuilds/tailwindcss-animate/llms.txt

Use this file to discover all available pages before exploring further.

The direction-{keyword} utilities set the animation-direction property on an element, controlling whether an animation runs forward, backward, or alternates between the two on successive cycles. This lets you create ping-pong effects or reverse animations without writing extra keyframes.

​
Reference

ClassProperties
direction-normalanimation-direction: normal;
direction-reverseanimation-direction: reverse;
direction-alternateanimation-direction: alternate;
direction-alternate-reverseanimation-direction: alternate-reverse;

​
Direction values

  • normal — The animation plays forward each cycle. This is the default browser behavior.
  • reverse — The animation plays backward each cycle, running keyframes from 100% to 0%.
  • alternate — The animation plays forward on odd cycles and backward on even cycles, creating a back-and-forth effect.
  • alternate-reverse — The animation plays backward on odd cycles and forward on even cycles, the inverse of alternate.

​
Basic usage

​
Changing animation direction

Apply a direction-{keyword} class alongside any animation class to control the playback direction. 
<button class="animate-bounce direction-normal ...">Button A</button>
<button class="animate-bounce direction-reverse ...">Button B</button>
<button class="animate-bounce direction-alternate ...">Button C</button>
<button class="animate-bounce direction-alternate-reverse ...">Button D</button>

​
Applying conditionally

​
Hover, focus, and other states

Use variant modifiers to apply a direction only in a specific state. For example, hover:direction-normal resets the direction to forward on hover. 
<div class="animate-bounce duration-300 delay-150 hover:direction-normal">
  <!-- ... -->
</div>
For a full list of available state modifiers, see the Hover, Focus, & Other States documentation.

​
Breakpoints and media queries

Prefix any direction utility with a responsive breakpoint to apply it only at that screen size and above. 
<div class="animate-bounce duration-300 delay-150 md:direction-normal">
  <!-- ... -->
</div>
Learn more in the Responsive Design and Dark Mode documentation.

​
Customization

​
Extending the theme

Add custom direction values by extending animationDirection in your tailwind.config.js file. 
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animationDirection: {
        "normal-reverse": "normal, reverse",
      },
    },
  },
}
Learn more in the theme customization documentation.

​
Arbitrary values

For one-off values that don’t belong in your theme, use square-bracket notation to generate the property on the fly. 
<div class="direction-[normal,reverse]">
  <!-- ... -->
</div>
Learn more in the arbitrary values documentation.

Build docs developers (and LLMs) love

Get started for freeTalk to us