Base Animations

Base animations are the fundamental building blocks in Tailwind Motion that allow you to create custom animations by combining different properties. Each property controls a specific aspect of the animation, such as opacity, translation, or rotation.

How Base Animations Work

Base animations follow this naming pattern:

motion-[property]-[direction]-[value]

• property: The property to animate (opacity, translate, scale, etc.)

• direction: The animation direction:

  • in - Entrance animations
  • out - Exit animations
  • loop - Continuous animations

• value: The target value for the animation

Quick Example

<div class="motion-opacity-in-0 motion-translate-y-in-100">
  fade in and slide in from below!
</div>

Available Properties

Tailwind Motion includes these animation properties:

Visual Properties

• Opacity - Fade elements in/out
• Scale - Change element size
• Translation - Move elements horizontally/vertically
• Rotation - Rotate elements

Filter Effects

• Blur - Apply blur effects
• Grayscale - Control grayscale filters

Color Animations

• Background Color - Animate background colors
• Text Color - Animate text colors

Combining Animations

Stack multiple animation classes to create complex effects:

<div class="motion-opacity-in-0 motion-translate-y-in-100 motion-rotate-in-90">
  Complex animation!
</div>