Tailwind CSS v4 Animations and Transitions — Motion Design Guide

In this tutorial, you will learn about Tailwind CSS v4 Animations and Transitions. We cover key concepts, practical examples, and best practices to help you master this topic.

Tailwind CSS v4 introduces CSS-driven animation utilities with a new @keyframes theme system, enhanced transition properties, scroll-driven animations, view transition support, and built-in animation presets.

What You'll Learn

You will learn how to define custom animations using the @keyframes theme block, use built-in animation utilities, create scroll-driven animations, implement view transitions, and optimize animation performance.

Why It Matters

Smooth animations improve user experience and engagement. DodaTech's tools use Tailwind v4 animations for loading states, page transitions, and interactive feedback in Doda Browser and Durga Antivirus Pro dashboards.

Real-World Use

Durga Antivirus Pro uses Tailwind v4 scroll-driven animations to animate scan progress indicators, view transitions for page navigation in the admin panel, and custom keyframe animations for threat detection alerts.

flowchart LR
    A[CSS Animations] --> B[Tailwind v4 Animations]
    B --> C[Keyframes Theme]
    B --> D[Transition Utilities]
    B --> E[Scroll-Driven]
    B --> F[View Transitions]
    C --> G[animate-spin]
    C --> H[animate-pulse]
    C --> I[Custom Keyframes]
    style B fill:#38bdf8,stroke:#0284c7,color:#fff
    style C fill:#22c55e,stroke:#16a34a,color:#fff

Built-in Animations

<!-- Built-in animation utilities -->
<div class="space-y-4 p-8 max-w-md mx-auto">
  <div class="animate-spin w-8 h-8 bg-blue-500 rounded-full mx-auto"></div>
  <div class="animate-pulse w-full h-4 bg-gray-300 rounded mx-auto"></div>
  <div class="animate-ping w-8 h-8 bg-green-500 rounded-full mx-auto"></div>
  <div class="animate-bounce w-8 h-8 bg-purple-500 rounded-full mx-auto"></div>
  <p class="text-center text-sm text-gray-500 mt-4">Built-in animations: spin, pulse, ping, bounce</p>
</div>

Expected output: Five animated elements showing the four built-in animation utilities: a spinning circle, a pulsing bar, a pinging dot, a bouncing ball, and descriptive text.

Custom Keyframes

@import "tailwindcss";

@theme {
  --animate-fade-in: fade-in 0.5s ease-out;
  --animate-slide-up: slide-up 0.3s ease-out;
  --animate-shake: shake 0.4s ease-in-out;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

<!-- Using custom animations -->
<div class="space-y-4 p-8 max-w-md mx-auto">
  <div class="animate-fade-in bg-blue-100 p-4 rounded-lg">
    Fades in over 0.5s
  </div>
  <div class="animate-slide-up bg-green-100 p-4 rounded-lg">
    Slides up from below
  </div>
  <button class="animate-shake bg-red-500 text-white px-6 py-2 rounded-lg hover:animate-none">
    Shake on load (hover to stop)
  </button>
</div>

Expected output: Three elements animate with custom keyframe animations. The first fades in, the second slides up, and the third shakes on page load.

Transition Utilities

<!-- Enhanced transition utilities -->
<div class="p-8 max-w-md mx-auto">
  <div class="
    group
    relative
    bg-white
    border
    rounded-xl
    p-6
    transition-all
    duration-300
    ease-out
    hover:shadow-xl
    hover:-translate-y-1
  ">
    <h3 class="text-lg font-semibold mb-2">Interactive Card</h3>
    <p class="text-gray-600 mb-4 transition-opacity duration-200 group-hover:opacity-100 opacity-70">
      This card lifts on hover with smooth transitions.
    </p>
    <div class="
      w-full h-2 bg-gray-200 rounded-full overflow-hidden
    ">
      <div class="
        h-full bg-blue-500 rounded-full
        transition-all duration-500 ease-in-out
        w-1/3 group-hover:w-full
      "></div>
    </div>
  </div>
</div>

Expected output: The card lifts on hover with a shadow. The description text becomes fully opaque. The progress bar animates from 33 percent to 100 percent width.

Scroll-Driven Animations

<!-- Scroll-driven animation -->
<div class="p-8 max-w-md mx-auto">
  <div class="h-96 overflow-y-auto border rounded-xl p-4">
    <p class="text-gray-500 mb-8">Scroll down to see the animation...</p>

    <div class="
      animate-fade-in
      [animation-timeline:view()]
      [animation-range:entry_0%_entry_100%]
      bg-gradient-to-r from-blue-500 to-purple-600
      text-white p-8 rounded-xl
    ">
      <h2 class="text-2xl font-bold mb-4">Scroll-Activated</h2>
      <p>This content animates when it scrolls into view using CSS scroll-driven animations.</p>
    </div>

    <div class="h-96"></div>
  </div>
</div>

Expected output: The card animates (fades in from the keyframe animation) when it scrolls into the viewport. The animation-timeline: view() binds the animation to the element's scroll position.

<!-- Scroll progress indicator -->
<div class="fixed top-0 left-0 w-full h-1 z-50">
  <div class="
    h-full bg-gradient-to-r from-blue-500 to-purple-600
    [animation-timeline:scroll()]
    [animation-range:0%_100%]
    animate-grow
  "></div>
</div>

@keyframes grow {
  from { width: 0%; }
  to { width: 100%; }
}

Expected output: A thin progress bar at the top of the page that fills from 0 to 100 percent width as the user scrolls down the page.

View Transitions

<!-- View transition animation -->
<div class="p-8 max-w-md mx-auto">
  <div class="
    view-transition-name-card
    bg-white border rounded-xl p-6
  ">
    <h2 class="text-xl font-bold mb-4">View Transition Demo</h2>
    <p class="text-gray-600">
      This element has a view-transition-name for smooth page transitions.
    </p>
  </div>
</div>

Expected output: When navigating between pages, the element with view-transition-name-card animates smoothly between states using the View Transitions API.

Performance Optimization

@import "tailwindcss";

/* Prefer transform and opacity for GPU-accelerated animations */
@theme {
  --animate-slide-in: slide-in 0.3s ease-out;
  --animate-optimized: optimized-move 0.5s ease-out;
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

<div class="p-8 max-w-md mx-auto">
  <div class="
    animate-slide-in
    will-change-transform
    bg-blue-100 p-6 rounded-xl
  ">
    <p class="text-gray-700">
      This animation only animates opacity and transform — both are GPU-accelerated properties that avoid layout reflow.
    </p>
  </div>
</div>

Expected output: The slide-in animation runs at 60fps because it only uses opacity and transform. The will-change-transform hints the browser to promote the element to its own compositor layer.

Common Mistakes

1. Animating Layout Properties

Animating width, height, margin, or top triggers layout reflow. Use transform for position and scale for size changes.

2. No prefers-reduced-motion Support

Always respect user preferences. Use motion-safe: and motion-reduce: variants to disable or simplify animations for users who prefer reduced motion.

3. Missing @keyframes Definitions

Custom animations require both the --animate-* theme variable AND the @keyframes definition. Missing either causes the animation to fail silently.

4. Overusing will-change

will-change should be used sparingly. Applying it to too many elements consumes GPU memory and can degrade performance instead of improving it.

5. Scroll-Driven Animation Browser Support

Scroll-driven animations (animation-timeline: scroll()) are new and not supported in all browsers. Always provide a fallback or detect support with @supports.

Practice Questions

1. How do you define a custom animation in Tailwind v4? Add --animate-* to the @theme block and define the corresponding @keyframes in your CSS.

2. What is the most performant way to animate position? Use transform: translateX() or translateY() instead of animating left or top properties.

3. How do you create a scroll-driven animation? Use [animation-timeline:view()] on the element and define the animation in the @theme keyframes.

4. What does motion-safe: do? It applies styles only when the user has not requested reduced motion in their system preferences.

5. What CSS property should you avoid animating for performance? Avoid animating width, height, margin, padding, left, top, and border-radius as they trigger layout reflow.

Challenge

Build a landing page hero section with a scroll-driven fade-in animation for the heading, a staggered entrance for three feature cards using custom keyframes with different delays, a scroll progress indicator bar, and view transition names for smooth page navigation.

FAQ

Mini Project

Create an animated dashboard widget that includes: a custom pulse animation for live data indicators, a scroll-driven progress tracker, staggered entrance animations for data cards using different animation-delay values, a view-transition-name for smooth page navigation, and prefers-reduced-motion fallbacks.

What's Next

Now master Deployment for optimizing and shipping your animated Tailwind v4 project to production. Then explore Tailwind v4 Project for a complete build-from-scratch project walkthrough.