Timing Control
- Control animation duration, delay, and repetition for precise motion design.
Transitions are not just about what moves -
they are about when and how fast things move.This lesson focuses on timing control, which directly affects:
Responsiveness
Smoothness
Perceived performance
Professional polish
We will cover two core timing controls:
Duration
Delay
Why Timing Control Matters in UI
Two UIs can have the same transition, but:
One feels fast and premium
One feels slow and annoying
The difference is timing.
Bad timing:
Makes UI feel laggy
Breaks user flow
Feels unresponsive
Good timing:
Feels instant
Feels natural
Builds trust
Duration
What is Duration ?
Duration defines:
How long a transition or animation takes to complete.
In simple words:
Duration controls the speed of motion.
Duration in Real UI Terms
Short duration → fast response
Long duration → slow, noticeable motion
Duration answers:
“How quickly should this change happen?”
Duration Without Transition
Duration does nothing alone.
This will NOT work:
<button class="duration-300 hover:bg-blue-600">
Transition is required:
<button class="transition duration-300 hover:bg-blue-600">
Duration in Traditional CSS
transition-duration: 0.2s;
Duration Utilities in Tailwind CSS
Tailwind provides predefined duration utilities:
Class Duration duration-75 Very fast duration-100 Fast duration-150 Quick duration-200 Natural duration-300 Smooth duration-500 Slow duration-700+ Very slow Most Commonly Used Durations
Professional UI usually sticks to:
150ms – 300ms
Why ?
Fast enough to feel instant
Slow enough to feel smooth
Hover Button Duration
Shows how hover background changes smoothly using transition duration.
/* hover transition with duration */
<button
class="bg-blue-500
hover:bg-blue-600
transition /* enable animation */
duration-200" /* speed */
>
Hover me
</button>User Experience
Color change is smooth
UI feels responsive
No delay in interaction
Duration for Different UI Actions
Interaction Type Recommended Duration Hover 150–200ms Focus 150–200ms Active / Press 75–150ms Dropdown open 200–300ms Modal open 300–400ms These are industry-tested ranges.
Common Beginner Mistakes
sing very long durations
Same duration for every interaction
Making buttons feel slow
Over-smoothing simple interactions
Rule:
If user feels “wait” → duration is too long.
Delay
What is Delay ?
Delay defines:
How long the browser waits before starting a transition.
In simple words:
Delay adds a pause before motion begins.
Delay in UI Context
Delay is NOT about smoothness.
Delay is about sequencing and timing attention.Used incorrectly → UI feels broken
Used correctly → UI feels intentionalDelay in Traditional CSS
transition-delay: 0.1s;
Delay Utilities in Tailwind CSS
Common delay classes:
delay-75
delay-100
delay-150
delay-200
delay-300
Basic Transition Delay
Shows how opacity change is delayed before animation starts.
/* delayed fade-in effect */
<div
class="opacity-0
hover:opacity-100
transition /* enable animation */
delay-150" /* wait before start */
>
Tooltip
</div>What Happens
Hover starts
150ms pause
Tooltip fades in
Where Delay is Actually Useful
Good use cases:
Tooltips
Secondary elements
Staggered animations
Hover intent detection
Bad use cases:
Buttons
Inputs
Core interactions
Primary actions
Why Delay is Dangerous
Too much delay:
Feels unresponsive
Confuses users
Breaks trust
Rule:
Never delay primary feedback.
Delay + Duration Combined
Shows how delay and duration work together to control animation timing.
/* combine delay and duration */
<div
class="transition
duration-200 /* animation time */
delay-100 /* wait before start */
hover:opacity-100"
>This means:
Wait 100ms
Animate for 200ms
Transition Timing
Shows a clean UI animation pattern using duration and easing.
/* smooth professional timing */
<button
class="bg-gray-200
hover:bg-gray-300
transition /* enable animation */
duration-150 /* quick response */
ease-out" /* smooth finish */
>
Click
</button>No delay.
This is professional UI timing.
Fast.
Responsive.Duration vs Delay
Duration Delay Controls speed Controls wait time Always important Rarely needed Feels smooth Feels intentional Used everywhere Used selectively Accessibility & Timing Control
Avoid long animations
Avoid delayed critical actions
Respect users who prefer reduced motion
Timing should never block usability
Motion must support, not interrupt.
Motion is not just about moving things -
it’s about how things move.This lesson focuses on two powerful concepts:
Easing Functions → control feel
Transform Utilities → control movement
Together, they create natural, professional UI motion.
Why Easing & Transform Matter
Without easing and transform:
Motion feels robotic
UI feels artificial
Interactions feel cheap
With proper easing and transform:
Motion feels smooth
UI feels responsive
Interactions feel intentional
Easing Functions
What is an Easing Function ?
An easing function controls:
How speed changes during a transition or animation.
In simple words:
Easing decides whether motion starts slow, ends slow, or stays constant.
Why Easing Is Important
Real-world motion:
Accelerates
Decelerates
Never moves at constant speed
Easing mimics natural physics.
Without Easing (Linear Motion)
Starts instantly
Stops instantly
Feels unnatural
transition-timing-function: linear;
Common Easing Types
1. Linear
Constant speed
Rarely used in UI
2. Ease-in
Slow start
Fast end
Good for exits
3. Ease-out
Fast start
Slow end
Best for hover & focus
4. Ease-in-out
Slow start and end
Smooth overall
Good for toggles and modals
Easing in Tailwind CSS
Tailwind provides simple easing utilities:
Utility Meaning ease-linear Constant ease-in Accelerate ease-out Decelerate ease-in-out Smooth both
Easing with Hover Scale
Shows how easing creates smooth scaling animation on hover.
/* scale animation with easing */
<div
class="transition
duration-200
ease-out /* smooth end */
hover:scale-105"
>
Card
</div>Why ease-out Here ?
Hover should respond quickly
Motion should settle gently
Best Easing for Common UI Actions
Common Beginner MistakesAction Easing Hover ease-out Focus ease-out Click ease-in Dropdown ease-in-out Modal open ease-out Modal close ease-in Using linear everywhere
Ignoring easing entirely
Same easing for every interaction
Overthinking easing values
Rule:
If unsure, use ease-out.
Transform Utilities
What Are Transform Utilities ?
Transform utilities change:
Position, size, or rotation without affecting layout
Transforms are:
Fast
GPU-accelerated
Ideal for motion
Why Transform Is Preferred for Motion
Compared to width/height/top/left:
No layout shift
Better performance
Smooth animations
Professional UI always uses transform for movement.
Common Transform Types
1. Scale
Used for:
Hover emphasis
Click feedback
Card focus
Scale Transform
Shows how to enlarge elements smoothly using scale transform on hover.
/* scale transform for hover emphasis */
<div class="transition hover:scale-105"></div>2. Translate (Move)
Used for:
Slide-in effects
Tooltips
Menus
Translate Transform
Shows how to move elements slightly using translate on hover.
/* move element on hover */
<div class="transition hover:translate-y-1"></div>3. Rotate
Used for:
Icons
Arrows
Toggles
Rotate Transform
Shows how to rotate elements smoothly on hover.
/* rotate element on hover */
<div class="transition hover:rotate-180"></div>4. Skew (Rare)
Used sparingly:
Skew Transform
Shows how to skew elements slightly using transform on hover.
/* skew transform (rare use) */
<div class="transition hover:skew-x-6"></div>- Transform Utilities in Tailwind
Transform Example Scale scale-105 Translate translate-x-2 Rotate rotate-45 Skew skew-y-6 All transforms should be paired with:
transition-transform
Transition Transform
Shows optimal way to animate transform properties smoothly.
/* best practice for transform animations */
<div
class="transition-transform /* only transform animates */
duration-200 /* speed */
ease-out /* smooth end */
hover:scale-105"
>This ensures:
Only transform is animated
Clean, predictable motion
Transform + Easing Combination
Shows how transform and easing create smooth press animation.
/* press effect using scale + easing */
<button
class="transition-transform
duration-150 /* quick */
ease-out /* smooth release */
active:scale-95" /* shrink on click */
>
Press
</button>User Experience
Button presses in
Feels tactile
Feels responsive
Transform + State
Shows how movement and shadow combine for interactive hover effect.
/* lift effect on hover */
<div
class="transition
hover:-translate-y-1 /* move up */
hover:shadow-lg" /* add shadow */
>
Card
</div>This creates:
Lift effect
Depth illusion
Premium UI feel
Performance Note
Transforms:
Are GPU-accelerated
Do not cause reflow
Are safe for animation
Avoid animating:
width
height
margin
top / left
Accessibility
Keep transforms subtle
Avoid excessive scaling
Motion should not cause discomfort
Respect reduced-motion users