Applying Modifiers

Modifiers allow you to customize various aspects of your animations, including duration, delay, timing function, and play state.

Available Modifiers

• Duration - Control how long animations take
• Delay - Add a delay before animations start
• Timing Function - Adjust the easing of animations
• Play State - Pause and resume animations

Basic Usage

Add modifier classes alongside your animation classes to customize their behavior:

<div class="motion-preset-fade motion-duration-2000">
  Slow fade in
</div>

Applying to Specific Properties

You can target specific properties using a slash (/) followed by the property name:

<div class="motion-delay-500/rotate motion-rotate-in-180 motion-opacity-in-0">
  Delayed rotation
</div>

In this example, the delay only applies to the rotation animation, while the opacity animation starts immediately.

Combining Multiple Modifiers

You can stack multiple modifiers to achieve complex animation behaviors:

<div class="motion-preset-slide-right-lg motion-duration-2000 motion-delay-500 motion-ease-bounce">
  Complex animation
</div>

Play State Control

Use play state modifiers to control animation playback:

<div class="motion-preset-oscillate-lg motion-paused hover:motion-running">
  Hover to play
</div>

Arbitrary Values

Most modifiers support arbitrary values using square brackets:

<div class="motion-scale-in-50 motion-duration-[1500ms] motion-ease-[cubic-bezier(1,-0.4,0.35,0.95)]">
  Custom timing
</div>