Transitions

Transitions

CSS transitions let you smoothly animate property changes over a specified duration. Instead of an instant jump from one state to another, the browser interpolates between the values creating smooth motion.

The Transition Property

.button {
    background: #3498db;
    transform: scale(1);
    transition: all 0.3s ease;
}

.button:hover {
    background: #2980b9;
    transform: scale(1.05);
}

Without transition, the hover change is instant. With it, the color and scale change smoothly over 0.3 seconds.

Transition Sub-Properties

Property	What It Controls	Example
transition-property	Which CSS property to animate	background, transform, all
transition-duration	How long the transition takes	0.3s, 500ms
transition-timing-function	The acceleration curve	ease, linear, ease-in-out
transition-delay	Wait before starting	0.1s, 200ms

Longhand Syntax

.card {
    transition-property: transform, box-shadow;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    transition-delay: 0s;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

Shorthand Syntax

/* property | duration | timing | delay */
transition: transform 0.3s ease 0s;

/* Multiple properties */
transition: transform 0.3s ease,
            box-shadow 0.3s ease,
            background 0.2s ease;

What Can Be Transitioned?

✅ Animatable	❌ Not Animatable
opacity	display
transform	font-family
background-color	position (static/relative/etc.)
color	float
width, height	content
margin, padding	text-align
border-radius	overflow
box-shadow

Common Transition Patterns

Hover Lift Effect

.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}

Color Fade

.link {
    color: #333;
    transition: color 0.3s ease;
}
.link:hover {
    color: #3498db;
}

Grow on Hover

.icon {
    transition: transform 0.2s ease;
}
.icon:hover {
    transform: scale(1.2);
}

Background Slide

.btn {
    background: linear-gradient(to right, #3498db 50%, #2c3e50 50%);
    background-size: 200% 100%;
    background-position: right;
    transition: background-position 0.4s ease;
}
.btn:hover {
    background-position: left;
}

Transition on all vs Specific Properties

all	Specific Properties
Quick to write	More explicit and intentional
Transitions everything — even unintended properties	Only transitions what you specify
Can cause performance issues	Better performance — only animate what matters

Key Takeaways

• Transitions animate property changes between two states (A → B)
• Specify property, duration, timing-function, and optionally delay
• Prefer specific properties over all for better performance
• Not all properties are animatable — display cannot be transitioned
• Transitions are triggered by state changes (hover, focus, class toggle)
• Combine transform and box-shadow for the classic hover-lift effect