← Back to CSS Course | Chapter 8: Animations & Effects | Lesson 8 of 22

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:

  1. Declaring Transition Properties
  2. Transition Timing Functions
  3. Transition Delay
  4. Using the Transition Shorthand
  5. Animateable Properties List
Syntax
css 
selector {
  transition: property duration timing-function delay;
}
selector:hover {
  property: newValue;
}

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.
  • Accepted values:
  • transition-property — property name, all (default), or none
  • transition-duration — time such as 0.3s or 300ms
  • transition-timing-function — ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
  • transition-delay — time before the transition starts
  • Shorthand order — property duration timing-function delay
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.
  • Accepted values:
  • ease — default, slow start and end
  • linear — constant speed
  • ease-in | ease-out | ease-in-out — acceleration variants
  • cubic-bezier(x1, y1, x2, y2) — custom curve
  • steps(<n>) — jumps in n discrete steps
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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.
  • Accepted values:
  • transition-delay: 0s — default, starts immediately
  • transition-delay: 0.3s — waits before starting
  • transition-delay: 200ms — milliseconds also work
  • transition-delay: -0.2s — negative values start partway in
  • comma-separated — one delay per property
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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.
  • Accepted values:
  • transition: <property> <duration> <timing-function> <delay> — shorthand order
  • transition: all 0.3s ease — animate every property
  • transition: opacity 0.3s, transform 0.5s — multiple, comma-separated
  • transition: none — disables transitions
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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.
  • Accepted values:
  • opacity, transform — cheap, run on the compositor
  • color, background-color — animatable colors
  • width, height, margin — animatable but trigger layout
  • display — not interpolated (discrete) by default
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>
Live Example
Related Topics

CSS 3D Transforms · CSS Animations · CSS 2D Transforms · CSS Image Styling

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Using the heavy all transition keyword on complex layouts, slowing down browser rendering and performance.
  2. Attempting to transition non-animateable properties like display: none, causing elements to snap instantly.
  3. 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

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.