CSS Transitions

Imagine clicking a light switch on your wall. The room goes from completely dark to bright white instantly—there is no middle state. It works, but it can feel a bit jarring. Now, imagine sliding a dimmer switch. The light fades up smoothly from dark to bright over a couple of seconds, creating a much softer, more pleasant transition. CSS transitions are those dimmer switches. They tell the browser to animate style changes smoothly over time (like slowly fading a button's color on hover) instead of snapping them instantly.

In this page:

Declaring Transition Properties
Transition Timing Functions
Transition Delay
Using the Transition Shorthand
Animateable Properties List

Declaring Transition Properties

The transition-property property specifies which CSS properties you want to animate. You can specify a single property (like background-color) or use the all keyword to animate all style changes on that element.

Note: Avoid using the all keyword in complex layouts, as it forces the browser to calculate unnecessary transitions, which can slow down performance.

Warning: Some CSS properties (like display: none or background-image) cannot be transitioned or animated.

Example: Declaring Transition Properties

css

<style>
.box {
  background: blue;
  transition-property: background-color;
  transition-duration: 0.3s;
}
.box:hover {
  background: red;
}
</style>
<div class="box">Hover to animate background-color</div>

Transition Timing Functions

The transition-timing-function property controls the speed curve of your animation, defining how it starts, moves, and ends, offering ease, linear, ease-in, ease-out, and ease-in-out options.

Note: Use ease-out to make animations start quickly and slow down at the end, which feels natural to users.

Warning: Avoid using linear curves for interface animations, as they can look robotic and artificial.

Example: Transition Timing Functions

css

<style>
.box {
  background: royalblue;
  color: white;
  padding: 10px;
  transition-property: transform;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
}
.box:hover {
  transform: translateX(50px);
}
</style>
<div class="box">Starts fast, slows down at the end</div>

Transition Delay

The transition-delay property specifies an amount of time to wait before beginning the animation, letting you pause or sequence your animations.

Note: Use transition-delay to create layered, staggered animations across multiple elements on your page.

Warning: Setting long transition delays can make your site feel sluggish and unresponsive to user clicks.

Example: Transition Delay

css

<style>
.box {
  background: royalblue;
  color: white;
  padding: 10px;
  transition-property: opacity;
  transition-duration: 0.3s;
  transition-delay: 0.5s;
}
.box:hover {
  opacity: 0.3;
}
</style>
<div class="box">Waits half a second before animating</div>

Using the Transition Shorthand

Instead of writing separate lines of code for property, duration, timing, and delay, you can write them all on a single line using the transition shorthand property, keeping your stylesheets clean and easy to read.

Note: Write your transition shorthand properties in this order: property, duration, timing-function, delay.

Warning: Separate multiple shorthand transitions with commas to prevent styling errors.

Example: Using the Transition Shorthand

css

<style>
.box {
  background: blue;
  color: white;
  padding: 10px;
  transition: background-color 0.3s ease-out 0.1s;
}
.box:hover {
  background: green;
}
</style>
<div class="box">property, duration, timing, delay in one line</div>

Animateable Properties List

Most layout and visual CSS properties (like colors, sizes, padding, margins, opacity, and transforms) can be transitioned and animated smoothly over time. However, structural properties that do not have numeric middle states (like display, font-family, or position) cannot be animated.

Note: Use the opacity property instead of display: none to fade elements out of view smoothly.

Warning: Attempting to transition non-animateable properties (like display: none) will cause the elements to snap instantly, bypassing your transition settings.

Example: Animateable Properties List

css

<style>
.box {
  background: royalblue;
  color: white;
  padding: 10px;
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.3s, transform 0.3s;
}
.box:hover {
  opacity: 0.5;
  transform: scale(1.1);
}
</style>
<div class="box">Opacity and transform both animate smoothly</div>

Common Mistakes

Using the heavy all transition keyword on complex layouts, slowing down browser rendering and performance.
Attempting to transition non-animateable properties like display: none, causing elements to snap instantly.
Writing duplicate transition declarations on separate lines, causing later rules to overwrite earlier ones instead of combining.

Chapter Summary

CSS transitions animate style changes smoothly over time instead of snapping them instantly.
Configure your transitions using four properties: transition-property, transition-duration, transition-timing-function, and transition-delay.
Combine these properties into a single line using the transition shorthand, separating multiple property transitions with commas.

Browser Support

Standard CSS transition properties and timing functions are supported natively by all modern web browsers.

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS 3D Transforms Next Lesson → CSS Animations