Sign in Get started

Tailwind CSS Tutorial · Interactivity and States · Lesson 18 of 27

Transitions and Animation

Smooth hover effects with transition and duration, transforms like scale and rotate, built-in animations, and respecting reduced motion.

Create a free account to save this page, take notes and track your progress. Sign in

Transitions

transition animates common properties (colours, opacity, shadows, transforms) when they change. Tune with duration-300, ease-out, delay-150.

Hover transitionsTry it yourself
<div class="flex flex-wrap gap-6 p-8">
  <button class="rounded-xl bg-white px-5 py-3 shadow transition duration-300 hover:-translate-y-1 hover:shadow-xl">Lift on hover</button>
  <button class="rounded-xl bg-emerald-500 px-5 py-3 text-white transition duration-150 ease-out hover:scale-110 active:scale-95">Grow</button>
  <div class="grid size-14 place-items-center rounded-xl bg-amber-400 transition duration-500 hover:rotate-180">Spin</div>
</div>

Transforms

scale-105, rotate-6, -translate-y-1, skew-x-3; 3D with rotate-x-45 and perspective-distant.

Built-in animations

animate-spin (loading icons), animate-ping (notification dots), animate-pulse (skeleton loaders), animate-bounce (scroll hints):

spin, ping, pulse and bounceTry it yourself
<div class="flex items-center gap-10 p-8">
  <svg class="size-8 animate-spin text-sky-500" viewBox="0 0 24 24" fill="none">
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
  </svg>
  <span class="relative flex size-4">
    <span class="absolute inline-flex size-full animate-ping rounded-full bg-rose-400 opacity-75"></span>
    <span class="relative inline-flex size-4 rounded-full bg-rose-500"></span>
  </span>
  <div class="w-48 animate-pulse space-y-2">
    <div class="h-3 rounded bg-gray-200"></div><div class="h-3 w-2/3 rounded bg-gray-200"></div>
  </div>
  <span class="motion-safe:animate-bounce text-2xl">↓</span>
</div>

Reduced motion

Some people get motion sickness from animation. motion-safe:animate-bounce animates only if the user hasn't asked to reduce motion; motion-reduce:animate-none turns it off.

Test yourself

Which class makes changes to colour and transform animate smoothly?

  1. transition
  2. animate
  3. ease
  4. motion
Show answer

Answer: transition

transition sets transition-property and a default duration.

Was this page helpful?