DocHero
Lesson 42 +10 XP

Transitions & Animation

Transitions & Animation

Make state changes feel smooth instead of abrupt.

Transition property

Control which properties transition:

ClassCSS
transitioncommon properties (color, bg, border, transform, etc.)
transition-noneno transition
transition-allall properties
transition-colorscolor, bg, border-color, text-decoration-color, fill, stroke
transition-opacityopacity
transition-shadowbox-shadow
transition-transformtransform
<button class="bg-sky-500 transition-colors hover:bg-sky-700">...</button>

Duration

  • duration-75 (75ms), duration-100, duration-150, duration-200, duration-300, duration-500, duration-700, duration-1000.
  • Any value: duration-1500, duration-[3s].

Timing function

  • ease-linear, ease-in, ease-out, ease-in-out.
  • Custom: ease-[cubic-bezier(0.4,0,0.2,1)], or define --ease-* in @theme.

Delay

  • delay-75 … delay-1000, any value.
<button class="transition-colors delay-150 duration-300 ease-in-out hover:bg-sky-700">...</button>

Animation

Built-in animations:

ClassKeyframes
animate-spininfinite linear spin
animate-pingping ripple
animate-pulsesoft pulse
animate-bouncebounce
<div class="animate-spin">...</div>

Custom animations:

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

Then use animate-wiggle.

TL;DR

  • transition enables smooth property changes.
  • duration-300, ease-in-out, delay-100 tune timing.
  • transition-colors / transition-transform limit scope.
  • animate-spin, animate-pulse, animate-bounce are built in.