Introduction

Modern websites are not static. Buttons change color, menus slide, cards lift on hover, and inputs glow on focus. All of this movement is achieved using CSS transitions.

CSS transitions allow you to change CSS properties smoothly over time, instead of instantly. They are lightweight, easy to implement, and essential for creating a professional user experience.

In this chapter, you will learn:

What CSS transitions are and how to use them
Transition properties in detail (duration, timing)
Hover, focus, and transform effects
Performance best practices

What Is a CSS Transition?

A CSS transition controls how a CSS property changes from one value to another over a period of time.

Visualizing the Difference

Without Transition (Instant)

button:hover {
  background-color: red;
}

With Transition (Smooth)

button {
  transition: background-color 0.3s;
}
button:hover {
  background-color: red;
}

Transition Properties in Detail

1. Transition Property

Defines which CSS property to animate.

transition-property: background-color;
/* or multiple */
transition-property: background-color, color;

2. Transition Duration

Defines how long the transition takes.

transition-duration: 0.3s; /* or 300ms */

3. Timing Function

Controls the speed curve.

`ease`	Default, smooth start & end
`linear`	Constant speed
`ease-in-out`	Smooth start and end

4. Shorthand (Best Practice)

/* property duration timing-function delay */
transition: all 0.3s ease;

Real-World Examples

Button Hover

button {
  background-color: #007bff;
  transition: background-color 0.3s;
}
button:hover {
  background-color: #0056b3;
}

Card Hover Effect (Transform)

Using transform is preferred for performance.

.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

Focus Transition for Forms

input {
  border: 1px solid #ccc;
  transition: border-color 0.3s, box-shadow 0.3s;
}
input:focus {
  border-color: #007bff;
  box-shadow: 0 0 4px rgba(0,123,255,0.4);
}

Common Beginner Mistakes & Best Practices

Common Mistakes

Adding transition to :hover instead of the element
Using very long durations (> 0.5s)
Animating layout properties (width, height, top)

Best Practices

Prefer transform and opacity
Keep transitions short (0.2s - 0.3s)
Use easing functions for natural feel

Chapter Summary

In this chapter, you learned:

What CSS transitions are and how to use the shorthand property.
How ease, linear, and other timing functions work.
How to create professional hover, focus, and card effects.
Why you should prefer transform and opacity for high performance.

You now know how to add smooth, professional motion to your website using pure CSS.

CSS Transitions