Skip to main content
Iteration count controls how many times an animation cycle repeats. Use it to create one-time effects, repeated animations, or infinite loops.

​
Usage

Apply iteration count classes to control animation repetition: 
<div class="animate-bounce animate-iteration-count-infinite">
  Bounces forever
</div>

<div class="animate-shake animate-iteration-count-thrice">
  Shakes three times
</div>

​
Quick Start

<div class="animate-bounce animate-iteration-count-once">
  Once
</div>

<div class="animate-bounce animate-iteration-count-twice">
  Twice
</div>

<div class="animate-bounce animate-iteration-count-thrice">
  Three times
</div>

<div class="animate-bounce animate-iteration-count-infinite">
  Forever
</div>

​
Available Iteration Values

​
Named Iteration Values

ClassCSS VariableValueUse Case
animate-iteration-count-none--tw-anim-iteration-count-none0Disable animation
animate-iteration-count-once--tw-anim-iteration-count-once1One-time effects
animate-iteration-count-twice--tw-anim-iteration-count-twice2Double emphasis
animate-iteration-count-thrice--tw-anim-iteration-count-thrice3Triple emphasis
animate-iteration-count-infinite--tw-anim-iteration-count-infiniteinfiniteContinuous effects

​
Numeric Iteration Values

Use any positive integer for custom iteration counts: 
<div class="animate-pulse animate-iteration-count-5">5 pulses</div>
<div class="animate-bounce animate-iteration-count-10">10 bounces</div>

​
Common Patterns

​
One-Time Entrance

Perfect for page load animations that shouldn’t repeat: 
<div class="animate-fade-in-up animate-iteration-count-once">
  Welcome message
</div>

​
Attention Seeker

Shake or pulse a few times to draw attention: 
<button class="animate-shake animate-iteration-count-thrice animate-delay-500">
  Important Action
</button>

<div class="animate-pulse animate-iteration-count-twice">
  New notification
</div>

​
Continuous Loading Indicator

Infinite animations for loading states: 
<div class="animate-spin-clockwise animate-iteration-count-infinite animate-duration-slow">
  ⏳
</div>

<div class="animate-pulse animate-iteration-count-infinite">
  Loading...
</div>

​
Pulsing Badge

Continuous subtle animation for notifications: 
<div class="relative">
  <span>Notifications</span>
  <span class="absolute top-0 right-0 
               animate-ping 
               animate-iteration-count-infinite 
               animate-duration-slow">
    <span class="badge">3</span>
  </span>
</div>

​
Combining with Other Properties

​
With Duration and Delay

<div class="animate-bounce 
            animate-iteration-count-thrice 
            animate-duration-fast 
            animate-delay-200">
  Quick triple bounce after delay
</div>

​
With Direction

Combine with animation direction for advanced effects: 
<div class="animate-slide-in-left 
            animate-iteration-count-twice 
            animate-direction-alternate">
  Slides in and out twice
</div>

​
With Fill Mode

<div class="animate-fade-in 
            animate-iteration-count-once 
            animate-fill-mode-forwards">
  Fades in once and stays visible
</div>

​
CSS Reference

The utility class maps to the CSS property: 
.animate-iteration-count-infinite {
  animation-iteration-count: infinite;
}

.animate-iteration-count-thrice {
  animation-iteration-count: 3;
}

​
Best Practices

Use once for entrances: Most entrance animations should run once (animate-iteration-count-once).
Limit attention seekers: Use 2-3 iterations for shake/pulse effects to avoid annoyance.
Be careful with infinite: Infinite animations can be distracting and impact performance.
  • Page load animations: once (1 iteration)
  • Attention seekers: twice or thrice (2-3 iterations)
  • Loading indicators: infinite
  • Hover effects: once (rely on hover trigger)
  • Notification badges: infinite (but subtle)

​
Advanced Examples

​
Sequential Emphasis

Shake multiple times with pauses using delays: 
<button class="group">
  <span class="animate-shake 
               animate-iteration-count-twice 
               group-hover:animate-iteration-count-thrice">
    Click me!
  </span>
</button>

​
Heartbeat Effect

Continuous heartbeat animation: 
<div class="animate-heartbeat 
            animate-iteration-count-infinite 
            animate-duration-slow">
  ❤️
</div>

​
Conditional Infinite

Use responsive variants to change iterations: 
<div class="animate-bounce 
            animate-iteration-count-thrice 
            md:animate-iteration-count-infinite">
  Limited on mobile, infinite on desktop
</div>

​
Wave Effect

Create a wave by staggering infinite animations: 
<div class="flex gap-2">
  <div class="animate-bounce animate-iteration-count-infinite animate-delay-0">•</div>
  <div class="animate-bounce animate-iteration-count-infinite animate-delay-100">•</div>
  <div class="animate-bounce animate-iteration-count-infinite animate-delay-200">•</div>
  <div class="animate-bounce animate-iteration-count-infinite animate-delay-300">•</div>
</div>

​
Toggle Animation

Use with JavaScript to control iterations dynamically: 
<button id="animateBtn" 
        class="animate-shake animate-iteration-count-none"
        onclick="this.classList.replace('animate-iteration-count-none', 'animate-iteration-count-thrice')">
  Click to animate
</button>

​
Accessibility Considerations

Respect user preferences: Users with vestibular disorders may be sensitive to motion.
/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .animate-iteration-count-infinite {
    animation-iteration-count: 1;
  }
}
Consider providing controls to pause infinite animations: 
<div class="relative">
  <div class="animate-spin animate-iteration-count-infinite animate-play-running" 
       id="spinner">
    ⟳
  </div>
  <button onclick="document.getElementById('spinner').classList.toggle('animate-play-paused')">
    Pause
  </button>
</div>

Build docs developers (and LLMs) love

Get started for freeTalk to us