Background Color

Basic Usage

<div class="motion-bg-in-red-500">
  Fade from red
</div>

Fade from red

The background color animations support:

All Tailwind default colors
Any colors you've defined in your theme configuration
Arbitrary values using the square bracket syntax (e.g., motion-bg-in-[#ff0000])

<div class="motion-bg-loop-purple-500">
  Loop colors
</div>

Loop colors

<div class="motion-bg-out-[#00ff00]">
  Exit animation
</div>

Exit animation

<div class="motion-bg-in-red-500 motion-scale-in-0">
  Background and scale
</div>

Background and scale

<div class="motion-bg-in-[#ff0000] motion-duration-[2s]">
  Slow color transition
</div>

Slow color transition