⚡ CSS Transitions — Smooth Property Changes

Last Updated: November 2025

CSS Transitions make property changes happen smoothly over time, instead of instantly.
They’re perfect for hover effects, button animations, or menu slides.

🗣 Hinglish Tip: Transition ka matlab hai — "style ekdum se change na ho, balki dheere dheere ho."

Syntax

selector {
  transition: property duration timing-function delay;
}

Each part means:

property → Which CSS property to animate
duration → How long the transition lasts
timing-function → Speed pattern (ease, linear, etc.)
delay → Wait time before it starts

button {
  background-color: skyblue;
  transition: background-color 0.5s ease;
}

button:hover {
  background-color: steelblue;
}

When you hover, background color changes smoothly in 0.5s.

🧩 Transition Properties Explained

Property	Description	Example
transition-property	Specifies which property to transition	transition-property: width;
transition-duration	Defines how long the transition lasts	transition-duration: 2s;
transition-timing-function	Speed curve of the transition	transition-timing-function: ease-in-out;
transition-delay	Delay before the transition starts	transition-delay: 0.5s;

Shorthand Property

.box {
  /* transition: property duration timing-function delay; */
  transition: all 1s ease-in-out 0.2s;
}

all means — apply transition to every animatable property.

🌀 Timing Functions

Function	Description	Effect
ease	Default, slow-fast-slow	Smooth natural motion
linear	Constant speed	Steady change
ease-in	Starts slow, ends fast	Fast entry
ease-out	Starts fast, ends slow	Soft exit
ease-in-out	Slow start & end	Balanced
cubic-bezier(x1, y1, x2, y2)	Custom control	Fine-tuned curve

🗣 Hinglish Tip: Timing function ek curve hoti hai — jo decide karti hai speed ka pattern har frame me.

##Width & Color Change

.box {
  width: 100px;
  height: 100px;
  background: coral;
  transition: width 1s, background 0.5s;
}

.box:hover {
  width: 200px;
  background: lightgreen;
}

Both width and background color animate smoothly.

Move on Hover

.move {
  width: 80px;
  height: 80px;
  background: tomato;
  position: relative;
  transition: left 1s ease;
}

.move:hover {
  left: 100px;
}

Moves smoothly from left to right.

Multiple Properties

.card {
  width: 150px;
  height: 150px;
  background: #ffcc00;
  border-radius: 10px;
  transition: transform 0.5s, box-shadow 0.3s;
}

.card:hover {
  transform: scale(1.1);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

Grows and adds shadow smoothly when hovered.

Delay Example

.delayed {
  width: 100px;
  height: 100px;
  background: purple;
  transition: background 1s ease 0.5s;
}

.delayed:hover {
  background: violet;
}

Transition starts after 0.5 seconds of hover.

← Previous Next →