Transitions, Smooth Transforms, Scale & Custom Keyframe Animations0%
Transitions, Smooth Transforms, Scale & Custom Keyframe Animations
Beginner12 min read•Updated: Jul 11, 2026
Transitions, Smooth Transforms, Scale & Custom Keyframe Animations
Delightful micro-interactions and smooth state changes separate amateur websites from polished, professional web applications. Tailwind CSS provides hardware-accelerated transitions, 2D/3D transforms, and built-in CSS animations without writing cumbersome keyframes.
1. CSS Transitions: Duration, Timing & Properties
To animate a state change (such as hover background color), add the transition class along with duration and easing:
HTML
<!-- Smooth Hover Card -->
<div class="bg-white hover:bg-slate-50 p-6 rounded-xl border transition-colors duration-300 ease-in-out">
Hover over me for a smooth color fade!
</div>
| Property | Tailwind Class | Description |
|---|---|---|
| Property | transition-all | Transitions all animatable CSS properties |
transition-colors | Transitions color, background-color, border-color | |
transition-transform | Hardware-accelerated transforms (scale, rotate, translate) | |
transition-opacity | Smooth fade-in and fade-out | |
| Duration | duration-150 / duration-300 / duration-500 | 150ms, 300ms, 500ms animation duration |
| Easing | ease-linear / ease-in / ease-out / ease-in-out | Timing bezier curve |
2. Transforms: Scale, Rotate & Translate
Tailwind enables hardware-accelerated transforms directly through class names:
HTML
<!-- Scale & Lift Card on Hover -->
<div class="transform hover:-translate-y-2 hover:scale-105 hover:shadow-2xl transition-all duration-300 rounded-2xl bg-white p-6">
<h3 class="font-bold">Next.js 15 Masterclass</h3>
</div>
<!-- Rotate Icon on Click -->
<button class="flex items-center gap-2 group">
<span>Toggle Details</span>
<svg class="w-4 h-4 transform group-hover:rotate-180 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</button>
3. Built-in Keyframe Animations
Tailwind includes 4 production-ready animations out of the box:
HTML
<!-- 1. Ping: Notification radar pulse -->
<span class="animate-ping h-3 w-3 rounded-full bg-emerald-400 opacity-75"></span>
<!-- 2. Pulse: Skeleton loading state -->
<div class="animate-pulse flex space-x-4">
<div class="rounded-full bg-slate-200 h-10 w-10"></div>
<div class="flex-1 space-y-2 py-1">
<div class="h-2 bg-slate-200 rounded"></div>
<div class="h-2 bg-slate-200 rounded w-5/6"></div>
</div>
</div>
<!-- 3. Spin: Loading spinner -->
<svg class="animate-spin h-5 w-5 text-blue-600" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
</svg>
<!-- 4. Bounce: Attention grabber arrow -->
<svg class="animate-bounce w-6 h-6 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
</svg>
Interactive Quiz
Multiple Choice Questions
Question 1
Which Tailwind utility class is commonly used to create shimmering skeleton loading screens?
Question 2
What is the benefit of using
transition-transform instead of transition-all when animating element scale or position?Question 3
Which class combination lifts an element 8px upward when hovered?
Question 4
How long does an animation run when styled with
duration-300?Question 5
What does the
animate-spin utility class do?Next Lesson
Component Extraction, @apply Directives & Tailwind Merge (clsx)
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
Related Lessons
Practice Quiz
Test your understanding of this lesson with 5 questions. Each question has one correct answer.