Animations & Transitions

What you'll learn

Apply transition-* utilities (properties, duration, timing, delay)

Use built-in animate-* utilities (spin, ping, pulse, bounce)

Create custom keyframe animations

Chain hover/focus/active transitions

Use group-hover for parent-child animations

Transition Utilities

Control transition-property, duration, timing, and delay with utility classes.

<button
  class="rounded-lg bg-blue-500 px-4 py-2 text-white transition-colors duration-200 hover:bg-blue-600"
>
  Hover Me
</button>

<div
  class="rounded-xl bg-white p-6 shadow-sm transition-all duration-300 ease-out hover:scale-105 hover:shadow-lg"
>
  Content with smooth scale
</div>

Utility	CSS Property
`transition-all`	`transition: all`
`transition-colors`	color, background-color, border-color
`transition-transform`	`transition: transform`
`duration-200`	`transition-duration: 200ms`
`ease-in-out`	`transition-timing-function: ease-in-out`

Built-in Animations

<div class="flex items-center gap-6 p-6">
  <!-- Spinning loader -->
  <div
    class="h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-blue-500"
  ></div>
  <!-- Ping notification dot -->
  <span class="relative flex h-4 w-4">
    <span
      class="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-400 opacity-75"
    ></span>
    <span class="relative inline-flex h-4 w-4 rounded-full bg-red-500"></span>
  </span>
  <!-- Pulse skeleton loader -->
  <div class="h-12 w-24 animate-pulse rounded-lg bg-gray-200"></div>
  <!-- Bounce -->
  <svg class="h-6 w-6 animate-bounce text-blue-500" ...>↓</svg>
</div>

Custom Keyframes

Define in globals.css:

@keyframes wiggle {
  0%,
  100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
}
@theme {
  --animate-wiggle: wiggle 1s ease-in-out infinite;
}

<button class="animate-wiggle rounded-lg bg-purple-500 px-4 py-2 text-white">
  Wobble
</button>

Performance Rule

Animate transform and opacity only. Avoid width, height, margin — those trigger layout recalculations.

Group Hover Animations

Animate children when parent is hovered with group + group-hover:.

<div
  class="group relative cursor-pointer rounded-xl border p-6 transition-shadow hover:shadow-lg"
>
  <div
    class="mb-3 h-32 rounded-lg bg-linear-to-br from-blue-400 to-purple-500 transition-transform duration-300 group-hover:scale-105"
  ></div>
  <h3 class="font-semibold transition-colors group-hover:text-blue-600">
    Interactive Card
  </h3>
  <p class="mt-1 text-sm text-gray-500">Children animate on parent hover.</p>
  <span
    class="mt-2 inline-block text-sm font-medium text-blue-500 transition-transform duration-200 group-hover:translate-x-1"
    >Learn →</span
  >
</div>

Animated Elements Showcase

Hover Card with Animated Border

Code

tsx

1<div class="group relative rounded-xl border-2 p-6">2<div class="..." style="...">  <!-- animated border overlay --></div>3<div><h3>Title</h3><p>Content</p></div>4</div>

Key Takeaways

Use transition-{property} duration-{time} ease-{type} for CSS transitions

Built-in animations: animate-spin, animate-pulse, animate-bounce, animate-ping

Custom keyframes via @theme { --animate-name: ... }

Animate transform + opacity for GPU-composited performance

group + group-hover for parent-triggered child animations

Respect prefers-reduced-motion with motion-safe:/motion-reduce: variants