# Transitions and Animation — Tailwind CSS

Source: https://www.skillbyai.com/en/tailwind/m-motion

> Subtle, respectful motion.

## transition, duration, animate

`transition-colors`, `transition-transform` or `transition` with `duration-200` and `ease-out` animate changes between states (such as `hover:scale-105`). Built-in animations include `animate-spin` (loaders), `animate-pulse` (skeletons) and `animate-ping`. Respect users who reduce motion with `motion-reduce:transition-none` and `motion-safe:` variants. Define custom keyframes as `--animate-*` theme variables with `@keyframes` inside `@theme`.

## Hover motion and a loading skeleton

With reduced-motion support.

```html
<a href="#" class="block rounded-xl border p-4 transition-transform duration-200 ease-out
                   hover:-translate-y-1 hover:shadow-lg motion-reduce:transition-none motion-reduce:hover:translate-y-0">
  Hover me
</a>

<div class="space-y-2 animate-pulse" aria-hidden="true">
  <div class="h-4 w-3/4 rounded bg-gray-200"></div>
  <div class="h-4 w-1/2 rounded bg-gray-200"></div>
</div>
```

## Keep UI transitions short

Around 150 to 300 ms feels responsive; longer animations slow users down.

**Quiz:** Which variant disables motion for users who prefer reduced motion?

- [ ] hover:
- [x] motion-reduce:
- [ ] print:
- [ ] dark:

*Answer:* motion-reduce:. Respect prefers-reduced-motion.