Transition Basics
- Learn how to create smooth transitions and animated interactions.
States define what changes in UI.
Transitions define how those changes happen.Without transitions, UI feels:
Abrupt
Mechanical
Unpolished
With transitions, UI feels:
Smooth
Natural
Responsive
Professional
What is a Transition ?
A transition controls the animation between two states of an element.
In simple words:
Transition decides how a style change moves from one state to another over time.
Example:
Button changes color on hover
Transition decides whether that change is instant or smooth
Why Transitions Are Important in UI
Transitions:
Reduce visual shock
Help users understand cause and effect
Guide attention
Improve perceived performance
They don’t add new functionality -
they improve experience and trust.States + Transitions = Real UI
States answer:
What happened?
Transitions answer:
How did it happen?
A professional UI always combines states with transitions.
Without vs With Transition
Without Transition
Hover → instant jump
Click → harsh change
Feels cheap or broken
With Transition
Hover → smooth change
Click → natural feedback
Feels intentional
Transition Effect
Shows how to animate background color smoothly on hover.
/* smooth transition setup */
button {
transition: background-color 0.2s ease; /* duration + easing */
}
/* hover state */
button:hover {
background-color: blue; /* animated change */
}Here:
background-color is animated
Duration is 0.2s
Motion follows ease
Transition Basics in Tailwind CSS
Tailwind simplifies transitions using utility classes.
Transition Basics
Shows how to enable default transitions using Tailwind utility.
/* basic transition utility */
<button class="transition">
Button
</button>This enables transition on common properties.
Key Transition Utilities in Tailwind
transition
Applies transition to:
color
background-color
border-color
opacity
transform
Transition Utility
Shows how transition applies to common properties like color, background, and transform.
/* applies transition to color, background, border, opacity, transform */
<div class="transition hover:bg-blue-500"></div>transition-colors
Only color-related properties animate.
Transition Colors Utility
Shows how only color-related properties animate using transition-colors.
/* animate only color properties */
<button class="transition-colors hover:text-blue-500">
Hover me
</button>transition-opacity
Used for fades.
Transition Opacity Utility
Shows how to create fade effects using transition-opacity.
/* fade effect using opacity */
<div class="opacity-0 hover:opacity-100 transition-opacity">
Tooltip
</div>transition-transform
Used for movement, scale, rotation.
Transition Transform Utility
Shows how to animate movement, scale, and rotation using transition-transform.
/* animate transform properties like scale, rotate */
<img
class="transition-transform hover:scale-105"
/>Transition Duration
Duration defines how long the transition takes.
Common duration utilities:
duration-75 (very fast)
duration-150
duration-200 (default-feel)
duration-300
duration-500 (slow)
Transition Duration
Shows how to control how long a transition animation takes.
/* duration controls animation time */
<button class="transition duration-200 hover:bg-blue-600">
Save
</button>Easing
Easing controls how motion accelerates and decelerates.
Common easing utilities:
ease-linear
ease-in
ease-out
ease-in-out
Easing Utility
Shows how easing controls the speed curve of a transition.
/* easing controls motion acceleration and deceleration */
<div class="transition duration-300 ease-in-out hover:scale-105"></div>- When to Use Which Easing
Interaction Recommended Hover ease-out Entrance ease-out Exit ease-in Toggle ease-in-out
Transition Delay
Delay waits before animation starts.
Transition Delay
Shows how to delay the start of a transition animation.
/* delay adds wait time before animation */
<div class="transition delay-150 hover:opacity-100"></div>- Use delay sparingly.
Transitions with States
Shows how different states animate smoothly using transition and duration.
/* combine hover & active states with transition */
<button
class="bg-blue-500 /* default */
hover:bg-blue-600 /* hover */
active:bg-blue-700 /* click */
transition /* enable animation */
duration-200" /* speed */
>
Submit
</button>What User Feels
Hover → smooth color shift
Click → instant pressed feel
Release → smooth return
This feels premium.
What Should Be Transitioned
Good for transitions:
Colors
Opacity
Transform (scale, translate)
Shadows
Avoid transitioning:
Width / height (layout shift)
Position frequently
Large complex layouts
Transitions vs Animations
Transition Animation Triggered by state Runs automatically Simple Complex Two states Multiple steps Best for UI feedback Best for storytelling
For most UI interactions → Transitions win.
Common Mistakes
Forgetting to add transition
Using very long durations
Over-animating everything
Animating layout-breaking properties
Using transitions without states
Accessibility & Transitions
Keep transitions short
Avoid motion-heavy effects
Respect user motion preferences
Transitions should assist, not distract