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 repeat-{amount} utilities set the animation-iteration-count property on an element, controlling how many times an animation plays before stopping. Use repeat-infinite to create looping animations, or repeat-1 when you want the animation to run exactly once.

​
Reference

ClassProperties
repeat-0animation-iteration-count: 0;
repeat-1animation-iteration-count: 1;
repeat-infiniteanimation-iteration-count: infinite;

​
Basic usage

​
Changing animation iteration count

Apply a repeat-{amount} class alongside any animation class to control how many times the animation cycles. 
<button class="animate-bounce repeat-0 ...">Button A</button>
<button class="animate-bounce repeat-1 ...">Button B</button>
<button class="animate-bounce repeat-infinite ...">Button C</button>
Use repeat-0 to immediately stop an animation that was set elsewhere, for example to disable looping at a specific breakpoint or state.

​
Applying conditionally

​
Hover, focus, and other states

Use variant modifiers to change the iteration count in a specific state. For example, hover:repeat-1 stops the infinite loop when the user hovers. 
<div class="animate-bounce repeat-infinite hover:repeat-1">
  <!-- ... -->
</div>
For a full list of available state modifiers, see the Hover, Focus, & Other States documentation.

​
Breakpoints and media queries

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

​
Customization

​
Extending the theme

Add custom iteration count values by extending animationRepeat in your tailwind.config.js file. 
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animationRepeat: {
        2: "2",
      },
    },
  },
}
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="repeat-[2]">
  <!-- ... -->
</div>
Learn more in the arbitrary values documentation.

Build docs developers (and LLMs) love

Get started for freeTalk to us