Rombo

Loop Count

Control how many times animations repeat

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.

ClassValue
motion-loop-infiniteinfinite
motion-loop-once1
motion-loop-twice2
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

On this page

✨ Rombo for Chrome

Design animations visually in your browser.

Export directly to Rombo for Tailwind, CSS, or Framer Motion.

Install