CSS Transitions

CSS Transitions are used to control how a CSS property changes from one value to another over time.
They do not create movement by themselves.
They only control the speed, timing, and delay of a change that already exists in CSS.

When a CSS value changes:

Without transition → change happens immediately
With transition → change happens gradually

This gradual change is called a transition.

How CSS Transition Works

CSS transition works in three steps:

A CSS property has an initial value
That property value changes (hover, class added, state changed)
Transition controls how that change happens

If no change occurs, transition does nothing.

1. transition-property

transition-property defines which CSS property should change gradually instead of instantly.

Only the properties written here will be animated.

Why this property is required

A CSS element can change many properties at the same time:

color
size
position
opacity

transition-property tells the browser:

Animate only these selected properties.

Example:

.box {
  background-color: red;
  transition-property: background-color;
}

When background-color changes:

Color changes smoothly
When other properties change:
They change instantly

Example:

transition-property: width, height, opacity;

Each listed property will animate when its value changes.

Special value: all

transition-property: all;

This means:

Every animatable property will transition

Why all is not always recommended

Animates unnecessary properties
Can reduce performance
Harder to debug in large UI

Animatable vs Non-animatable properties

Animatable

color
opacity
transform
background-color

Not animatable

display
position
float

transition-property does nothing if the property cannot be animated.

2. transition-duration

transition-duration defines the total time required to complete the transition.

It controls animation speed indirectly.

Units

s → seconds
ms → milliseconds

Example:

transition-duration: 1s;

The transition completes in 1 second
From start value to end value

Very slow animation

transition-duration: 3s;

Used for:

Large panels
Background effects

Very fast animation

transition-duration: 200ms;

Used for:

Buttons
Hover effects

Important rule

If duration is:

transition-duration: 0s;

Then:

No animation occurs
Change is instant

Multiple durations

transition-property: width, height;
transition-duration: 1s, 0.5s;

Meaning:

Width animates for 1 second
Height animates for 0.5 seconds

Order matters.

3. transition-timing-function

transition-timing-function defines how the animation speed changes during the duration.

It controls:

Start speed
Middle speed
End speed

Why timing function is needed

Without timing control:

Animation feels mechanical

With timing control:

Animation feels natural

transition-timing-function values:

1. linear

transition-timing-function: linear;

Behavior:

Same speed from start to end
No acceleration or deceleration

Used for:

Loaders
Progress bars

2. ease (default)

transition-timing-function: ease;

Behavior:

Slow start
Faster middle
Slow end

Used for:

Most UI elements

3. ease-in

transition-timing-function: ease-in;

Behavior:

Starts slowly
Ends fast

Used for:

Elements entering the screen

4. ease-out

transition-timing-function: ease-in-out;

Behavior:

Starts fast
Ends slowly

Used for:

Hover effects
Dropdown closing

5. ease-in-out

transition-timing-function: ease-in-out;

Behavior:

Slow start
Slow end

Used for:

Modals
Panels
Cards

4. transition-delay

transition-delay defines how long the browser waits before starting the transition.

Example

transition-delay: 0.3s;

Meaning:

Animation starts after 0.3 seconds

Negative delay

transition-delay: -0.2s;

Meaning:

Animation starts midway

Used for:

Advanced staggered animations

Use cases

Tooltip delay
Sequential UI animation
Prevent accidental hover triggers

5. Shorthand transition

Purpose

Combines all transition properties into one line.

Syntax:

transition: property duration timing-function delay;

Example

transition: transform 0.3s ease-in-out 0s;

Examples:

Fade Out Effect

HTML

<div class="fade">Fade</div>

CSS

.fade {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
.fade:hover {
  opacity: 0;
}

Fade In Effect

HTML

<div class="fade-in show">Fade In</div>

CSS

.fade-in {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.fade-in.show {
  opacity: 1;
}

Slide Up Effect

HTML

<div class="slide-up">Slide Up</div>

CSS

.slide-up {
  transform: translateY(20px);
  transition: transform 0.4s ease-out;
}
.slide-up:hover {
  transform: translateY(0);
}

Slide Left Effect

HTML

<div class="slide-left">Slide Left</div>

CSS

.slide-left {
  transform: translateX(30px);
  transition: transform 0.4s ease-in-out;
}
.slide-left:hover {
  transform: translateX(0);
}

Scale Up Effect

HTML

<div class="scale">Scale</div>

CSS

.scale {
  transform: scale(1);
  transition: transform 0.3s ease-in-out;
}
.scale:hover {
  transform: scale(1.1);
}

Background Color Change

HTML

<button class="color-change">Hover</button>

CSS

.color-change {
  background-color: #3498db;
  color: #fff;
  border: none;
  padding: 10px 20px;
  transition: background-color 0.3s ease;
}
.color-change:hover {
  background-color: #2c3e50;
}

Multiple Properties Transition

HTML

<div class="multi">Card</div>

CSS

.multi {
  background-color: #27ae60;
  transform: translateY(0);
  transition-property: background-color, transform;
  transition-duration: 0.3s, 0.4s;
  transition-timing-function: ease, cubic-bezier(0.4, 0, 0.2, 1);
}
.multi:hover {
  background-color: #1e8449;
  transform: translateY(-10px);
}

Transition Delay

HTML

<div class="delay">Delay</div>

CSS

.delay {
  opacity: 1;
  transition: opacity 0.4s ease 0.3s;
}
.delay:hover {
  opacity: 0.5;
}

Shorthand Transition

HTML

<div class="short">Short</div>

CSS

.short {
  transform: scale(1);
  transition: transform 0.3s ease-in-out;
}
.short:hover {
  transform: scale(1.05);
}

✅Follow us for more updates:

Follow on LinkedIn Join WhatsApp Channel