Until now, we learned:

• States (hover, focus, active, etc.)

• How UI reacts to user actions

Now we move to:

How those reactions visually happen over time

This lesson gives a big-picture understanding of:

• Transitions

• Animations

• Their purpose

• When to use which

Why Transitions & Animations Matter

Modern users expect UI to:

• Respond smoothly

• Feel natural

• Communicate cause & effect

• Guide attention

Without motion:

• UI feels rigid

• Feedback feels abrupt

• Experience feels outdated

Overview of Transitions & Animations

What Are Transitions ? 

A transition controls the smooth change between two states.

In simple words:

Transition animates a property when its value changes.

Example:

• Button color changes on hover

• Input border changes on focus

Transitions are:

• State-driven

• Short-lived

• Triggered by interaction

What Are Animations ? 

An animation controls movement that:

• Can run automatically

• Can loop

• Can have multiple steps (keyframes)

In simple words:

Animation defines how an element behaves over time, even without user action.

Examples:

• Loading spinner

• Skeleton loader

• Attention pulse

• Entrance animation

Transition vs Animation

Most UI interactions use transitions
Animations are used selectively

How They Work Together

In real UI:

• Transitions handle micro-interactions

• Animations handle continuous or scripted motion

A professional UI uses both - carefully.

When NOT to Use Motion

Avoid motion when:

• It delays user action

• It distracts from content

• It causes confusion

• It triggers motion sickness

Good motion is felt, not noticed.

Transition Properties

What Are Transition Properties ?

Transition properties define:

What changes, how long it takes, and how it moves

They control the behavior of transitions.

There are four core transition properties.

transition-property

Defines which CSS property should animate.

Examples:

• color

• background-color

• opacity

• transform

• border-color

CSS Concept

transition-property: background-color;

Tailwind Equivalent (High-Level)

<div class="transition-colors"></div>

This tells the browser:

Animate color-related changes only

transition-duration

Defines how long the transition takes.

Examples:

• 0.1s → very fast

• 0.2s → natural

• 0.3s → smooth

• 0.5s+ → slow (use carefully)

CSS Concept

transition-duration: 0.2s;

Duration controls responsiveness feel.

transition-timing-function 

Defines how the motion progresses over time.

Common easing types:

• linear → constant speed

• ease-in → slow start

• ease-out → slow end

• ease-in-out → smooth both sides

CSS Concept

transition-timing-function: ease-out;

Tailwind Example

<div class="transition duration-300 ease-out hover:scale-105"></div>

Easing controls emotion of motion.

transition-delay

Defines how long to wait before starting the transition.

CSS Concept

transition-delay: 0.1s;