Loop Count

Basic Usage

Control how many times animations repeat using the motion-loop-{value} utility:

<div class="motion-translate-y-loop-25 motion-loop-twice">Loop twice</div>

Loop twice

Default Value

The default loop count for all loop animations is infinite if no loop count modifier is specified.

Available Values

These are the theme default values. You can customize the theme to add your own values to the motionLoopCount property or use arbitrary values.

Class	Value
motion-loop-infinite	infinite
motion-loop-once	1
motion-loop-twice	2
motion-loop-[1.5]	Arbitrary value

Property-Specific Loop Count

Apply loop count to specific properties using a slash /:

<div class="motion-loop-twice/rotate motion-rotate-loop-180 motion-translate-y-loop-25">
  Rotate twice, translate infinitely
</div>

Rotate twice, translate infinitely

Examples

Single Loop

<div class="motion-translate-y-loop-25 motion-loop-once">Loop once</div>

Loop once

Multiple Properties

<div class="motion-loop-once/opacity motion-loop-twice/rotate motion-opacity-loop-50 motion-rotate-loop-180">
  Different loop counts per property
</div>

Different loop counts per property

Infinite Loop

<div class="motion-translate-y-loop-25 motion-loop-infinite">Loop forever</div>

Loop forever