Loop Animations

Basic Usage

Create loop animations by using the loop direction with any base animation:

<div class="motion-translate-y-loop-25">
  Continuous up and down motion
</div>

Overview

Loop animations are continuous animations that repeat indefinitely. They're perfect for creating ongoing visual effects like spinners, pulsing elements, or floating objects.

Each element will continuously animate between its default state and the target state (the value after -loop-). For example:

• motion-translate-y-loop-25 alternates between translateY(0) and translateY(25%)
• motion-scale-loop-110 alternates between scale(1) and scale(1.1)
• motion-rotate-loop-45 alternates between rotate(0deg) and rotate(45deg)
• motion-opacity-loop-50 alternates between 100% and 50% opacity

Loop Modifiers

Loop animations can be modified with /mirror or /reset to achieve different looping behaviors:

Mirror Loops

Adding /mirror creates a back-and-forth animation that reverses direction:

<div class="motion-translate-y-loop-50/mirror">
  Back-and-forth motion
</div>

Reset Loops

Adding /reset makes the animation return instantly to its starting position:

<div class="motion-translate-y-loop-50/reset">
  Instant reset motion
</div>

This is particularly useful for creating spinners

<div class="motion-rotate-loop-[1turn]/reset"></div>
<div class="motion-rotate-loop-[1turn]/reset motion-ease-linear"></div>

Customizing Loop Animations

You can customize loop animations using modifiers. See the applying modifiers guide for more details:

<div class="-motion-translate-y-loop-50 motion-duration-[2s] motion-ease-spring-smooth">
  Slow, smooth floating
</div>

Combining Loop Animations

Stack multiple loop animations to create complex effects:

<div class="motion-translate-y-loop-25 motion-rotate-loop-45 motion-blur-loop-sm">
  Complex looping animation
</div>

Presets

Explore our collection of animation presets to quickly apply pre-defined loop animations to your projects.