❮ Previous Next ❯

Animation

  • Build engaging keyframe animations and motion effects.

  • Transitions respond to user interaction.
    Animations can run independently of interaction.

    This lesson introduces Animation Utilities, which allow UI to:

    • Move automatically

    • Indicate loading or progress

    • Draw attention

    • Communicate system status

      What is an Animation ? 

      An animation is a visual change that:

      • Can run automatically

      • Can repeat

      • Can have multiple steps

      • Is not limited to just two states

      In simple words:

      Animation controls how an element behaves over time.

      Transition vs Animation

      TransitionAnimation
      Triggered by stateTime-based
      Needs interactionCan run automatically
      Two statesMultiple steps
      Short-livedContinuous / looped

      Transitions = interaction feedback
      Animations = status & storytelling

      Why Animations Are Used in UI

      Animations help users understand:

      • Something is loading

      • Something is processing

      • Something needs attention

      • Something has changed state

      Animations reduce uncertainty and improve perceived performance.

      What Are Animation Utilities ?

      Animation utilities are predefined animation classes that:

      • Apply motion using keyframes

      • Run without custom CSS

      • Are easy to apply and control

      They allow developers to add motion without writing animation code.

      Animation Utilities in Tailwind CSS

      Tailwind provides ready-made animation utilities such as:

      • animate-spin

      • animate-ping

      • animate-pulse

      • animate-bounce

      These are utility-first animations.

    • Core Animation Utilities

      animate-spin

      What It Does

      • Rotates element continuously

      • Used for loading indicators

      Common Use Cases

      • Spinners

      • Refresh icons

      • Loading states

    Spin Animation (Loading Indicator)

    This element continuously rotates using Tailwind’s animate-spin, commonly used for loaders and spinners. 

    <div class="animate-spin w-6 h-6 border-2 border-blue-500 rounded-full"></div>

    • User Meaning

      “Something is loading or processing”

      animate-pulse

      What It Does

      • Fades in and out smoothly

      • Creates breathing effect

      Common Use Cases

      • Skeleton loaders

      • Placeholder content

      • Loading cards

    Pulse Animation (Loading Placeholder)

    This element fades in and out using Tailwind’s animate-pulse, indicating content is loading. 

    <div class="animate-pulse bg-gray-300 h-4 w-32 rounded"></div>

    • User Meaning

      “Content is loading here”

      animate-bounce

      What It Does

      • Moves element up and down

      • Draws attention

      Common Use Cases

      • Scroll indicators

      • Notifications

      • Call-to-action hints

    Bounce Animation (Attention Indicator)

    This element moves up and down using Tailwind’s animate-bounce to grab user attention. 

    <div class="animate-bounce text-blue-500">
  ↓
</div>

    • User Meaning

      “Look here / take action”

      animate-ping

      What It Does

      • Expanding ripple effect

      • Fades outward

      Common Use Cases

      • Notification dots

      • Online indicators

      • Status highlights

    Ping Animation (Notification Ripple)

    This element creates a ripple effect using Tailwind’s animate-ping, commonly used for notifications and status indicators. 

    <span class="relative flex h-3 w-3">
  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
  <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
</span>

    • User Meaning

      “Something is active or live”

      Animation Duration & Speed 

      Default animation speed is predefined, but:

      • Should not feel distracting

      • Should match UI purpose

      Animations are meant to:

      • Inform

      • Guide

      • Reassure

      Not to entertain unnecessarily.

      When to Use Animations

      Good use cases:

      • Loading indicators

      • Background system activity

      • Skeleton screens

      • Attention cues

      • Status indicators

      Bad use cases:

      • Core buttons

      • Primary inputs

      • Every hover interaction

      • Decorative overuse

      Animations + State

      Animations should often be:

      • Conditional

      • State-driven

    State-Based Animation (Disabled Button)

    This button shows a loading state using Tailwind’s animate-pulse when disabled. 

    <button disabled class="animate-pulse">
  Processing...
</button>

    • Animation communicates status clearly.

      Accessibility & Animations

      Animations must:

      • Be subtle

      • Avoid flashing

      • Avoid continuous distraction

      • Respect reduced-motion preferences

      Too much animation:

      • Causes fatigue

      • Reduces clarity

      • Hurts accessibility

      Common Mistakes

      • Animating everything

      • Using animations for hover instead of transitions

      • Distracting users

      • Ignoring performance

      • Ignoring accessibility

        Animation Utilities vs Custom Animations

        Utility AnimationsCustom Animations
        Quick to applyMore control
        ConsistentMore complex
        Best for common casesBest for unique effects

        Start with utilities - customize only when needed.

      ❮ Previous Next ❯