Transition Property

Basic usage

Controlling transitioned properties

Use the transition-{properties} utilities to specify which properties should transition when they change.

<button className="**transition** ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300 ...">
  Save Changes
</button>

Prefers-reduced-motion

For situations where the user has specified that they prefer reduced motion, you can conditionally apply animations and transitions using the motion-safe and motion-reduce variants:

<button className="transition transform hover:-translate-y-1 **motion-reduce:transition-none motion-reduce:transform-none** ...">
  Hover me
</button>